ash/webui/diagnostics_ui/resources/realtime_cpu_chart.html

<style include="diagnostics-shared">
  :host-context(body.jelly-enabled) #chart-legend {
    font: var(--cros-annotation-1-font);
  }

  :host-context(body.jelly-enabled) g.tick text {
    font: var(--cros-annotation-1-font);
  }

  :host-context(body.jelly-enabled) #legend-bar {
    border-radius: 4px;
    height: 4px;
  }

  g.tick line {
    shape-rendering: crispEdges;
    stroke: var(--cros-separator-color);
    stroke-width: 1px;
  }

  g.tick:first-of-type line {
    stroke: var(--cros-color-primary);
  }

  g.tick text {
    color: var(--cros-color-secondary);
    font-family: var(--diagnostics-roboto-font-family);
    font-size: 12px;
    font-weight: var(--diagnostics-regular-font-weight);
    line-height: 18px;
  }

  path.domain {
    visibility: hidden;
  }

  #plotGroup {
    fill: none;
    stroke-width: 1.5px;
  }

  .user-area {
    fill: url(#user-gradient);
    shape-render: optimizeSpeed;
    stroke: var(--chart-user-line-color);
    stroke-width: 1.5px;
  }

  .system-area {
    fill: url(#system-gradient);
    shape-render: optimizeSpeed;
    stroke: var(--chart-system-line-color);
    stroke-width: 1.5px;
  }

  .gradient-blue {
    stop-color: var(--chart-user-gradient-color);
  }

  .gradient-yellow {
    stop-color: var(--chart-system-gradient-color);
  }

  .gradient-opacity {
    stop-opacity: 0;
  }

  #chart-legend {
    color: var(--cros-text-color-primary);
    font-family: var(--diagnostics-roboto-font-family);
    font-size: 12px;
    font-weight: var(--diagnostics-regular-font-weight);
    padding-inline-end: 5px;
    text-align: end;
  }

  #chart-legend > .divider {
    display: inline-block;
    height: 24px;
    position: relative;
    top: 8px;
  }

  div.legend-group {
    display: inline-block;
    padding: 0 20px 8px 0;
    text-align: start;
  }

  div.legend-group > span {
    display: inline-block;
    padding-inline-start: 8px;
    text-align: end;
    white-space: nowrap;
    width: 25px;
  }

  #legend-bar {
    border-radius: 1px;
    display: inline-block;
    height: 2px;
    margin: 0 16px 3px 0;
    width: 10px;
  }

  #legend-bar.user {
    background-color: var(--chart-user-line-color);
  }

  #legend-bar.system {
    background-color: var(--chart-system-line-color);
  }
</style>
<svg id="chart" width$="[[width_]]" height$="[[height_]]" aria-hidden="true">
  <g id="chartGroup">
    <defs>
      <!-- Define chart area and boundaries -->
      <clipPath id="defClip">
        <rect width$="[[graphWidth_]]" height$="[[graphHeight_]]"></rect>
      </clipPath>
      <!-- Chart area gradient -->
      <linearGradient id="user-gradient" gradientTransform="rotate(90)">
        <stop offset="0%" class="gradient-blue"></stop>
        <stop offset="100%" class="gradient-blue gradient-opacity"></stop>
      </linearGradient>
      <linearGradient id="system-gradient" gradientTransform="rotate(90)">
        <stop offset="0%" class="gradient-yellow"></stop>
        <stop offset="100%" class="gradient-yellow gradient-opacity"></stop>
      </linearGradient>
    </defs>

    <g id="gridLines" class="grid"></g>
    <g id="plotGroup" clip-path="url(#defClip)">
      <path class="user-area"></path>
      <path class="system-area"></path>
    </g>
  </g>
</svg>
<div id="chart-legend">
  <div id="legend-user" class="legend-group">
    <div id="legend-bar" class="user"></div>
    <label id="userLabel">[[i18n('cpuUsageUser')]]</label>
    <span id="userData" aria-labelledby="userLabel">
      [[getPercentageLabel_(user)]]
    </span>
  </div>
  <div class="divider"></div>
  <div id="legend-system" class="legend-group">
    <div id="legend-bar" class="system"></div>
    <label id="systemLabel">[[i18n('cpuUsageSystem')]]</label>
    <span id="systemData" aria-labelledby="systemLabel">
      [[getPercentageLabel_(system)]]
    </span>
  </div>
</div>