Use "global" gradients via a clipping mask and a rect w/100% height

ui/app/components/line-chart.js

@@ -48,6 +48,10 @@ export default Component.extend(WindowResizable, {
     return `line-chart-fill-${guidFor(this)}`;
   }),
 
+  maskId: computed(function() {
+    return `line-chart-mask-${guidFor(this)}`;
+  }),
+
   activeDatum: null,
 
   activeDatumLabel: computed('activeDatum', function() {

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

@@ -1,29 +1,28 @@
 <svg>
   <defs>
-    <clipPath>
-      <linearGradient x1="0" x2="0" y1="0" y2="1" class="{{chartClass}}" id="{{fillId}}">
-        <stop class="start" offset="0%" />
-        <stop class="end" offset="100%" />
-      </linearGradient>
+    <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}}" />
-    <path class="fill" d="{{area}}" fill="url(#{{fillId}})" />
+    <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 class="x-axis axis" transform="translate(0, {{xAxisOffset}})"></g>
   <g class="y-axis axis" transform="translate({{yAxisOffset}}, 0)"></g>
 </svg>
 <div class="chart-tooltip is-snappy {{if isActive "active" "inactive"}}" style={{tooltipStyle}}>
-  <ol>
-    <p>
-      <span class="label">
-        <span class="color-swatch {{chartClass}}" />
-        {{activeDatumLabel}}
-      </span>
-      <span class="value">{{activeDatumValue}}</span>
-    </p>
-  </ol>
+  <p>
+    <span class="label">
+      <span class="color-swatch {{chartClass}}" />
+      {{activeDatumLabel}}
+    </span>
+    <span class="value">{{activeDatumValue}}</span>
+  </p>
 </div>