diff --git a/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html b/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html
index 559965212e..d62a6bb99a 100644
--- a/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html
+++ b/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html
@@ -31,6 +31,7 @@
     <div id="chart-and-spinner-container">
       <vz-line-chart2
         id="chart"
+        data-loading$="[[dataLoading]]"
         color-scale="[[colorScale]]"
         default-x-range="[[defaultXRange]]"
         default-y-range="[[defaultYRange]]"
@@ -39,7 +40,6 @@
         on-chart-attached="_onChartAttached"
         smoothing-enabled="[[smoothingEnabled]]"
         smoothing-weight="[[smoothingWeight]]"
-        style="[[_computeLineChartStyle(dataLoading)]]"
         symbol-function="[[symbolFunction]]"
         tooltip-columns="[[tooltipColumns]]"
         tooltip-position="[[tooltipPosition]]"
@@ -85,10 +85,14 @@
         top: 0;
       }
 
-      vz-line-chart {
+      vz-line-chart2 {
         -webkit-user-select: none;
         -moz-user-select: none;
       }
+
+      vz-line-chart2[data-loading] {
+        opacity: 0.3;
+      }
     </style>
   </template>
   <script src="../vz-line-chart2/line-chart-exporter.js"></script>
@@ -244,10 +248,6 @@
           this.redraw();
         },
 
-        _computeLineChartStyle(loading) {
-          return loading ? 'opacity: 0.3;' : '';
-        },
-
         _fixBadStateWhenActive() {
           // When the chart enters a potentially bad state (because it should
           // redraw, but the page is not currently active), we set the