open-nomad/ui/app/templates/components/line-chart.hbs

<svg data-test-line-chart role="img" aria-labelledby="{{concat "title-" elementId}} {{concat "desc-" elementId}}">
  <title id="{{concat "title-" elementId}}">{{title}}</title>
  <description id="{{concat "desc-" elementId}}">
    {{#if description}}
      {{description}}
    {{else}}
      X-axis values range from {{xRange.firstObject}} to {{xRange.lastObject}},
      and Y-axis values range from {{yRange.firstObject}} to {{yRange.lastObject}}.
    {{/if}}
  </description>
  <defs>
    <linearGradient x1="0" x2="0" y1="0" y2="1" class="{{chartClass}}" id="{{fillId}}">
      <stop class="start" offset="0%" />
      <stop class="end" offset="100%" />
    </linearGradient>
    <clipPath id="{{maskId}}">
      <path class="fill" d="{{area}}" />
    </clipPath>
  </defs>
  <g class="y-gridlines gridlines" transform="translate({{yAxisOffset}}, 0)"></g>
  <g class="canvas {{chartClass}}">
    <path class="line" d="{{line}}" />
    <rect class="area" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" fill="url(#{{fillId}})" clip-path="url(#{{maskId}})" />
    <rect class="hover-target" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" />
  </g>
  <g aria-hidden="true" class="x-axis axis" transform="translate(0, {{xAxisOffset}})"></g>
  <g aria-hidden="true" class="y-axis axis" transform="translate({{yAxisOffset}}, 0)"></g>
</svg>
<div class="chart-tooltip is-snappy {{if isActive "active" "inactive"}}" style={{tooltipStyle}}>
  <p>
    <span class="label">
      <span class="color-swatch {{chartClass}}" />
      {{activeDatumLabel}}
    </span>
    <span class="value">{{activeDatumValue}}</span>
  </p>
</div>