diff --git a/e2e/test/scenarios/dashboard-cards/reproductions/32231-add-incompatible-series.cy.spec.js b/e2e/test/scenarios/dashboard-cards/reproductions/32231-add-incompatible-series.cy.spec.js
index eb8410eef6fcde4d92a4672b63e3ad4d11fe9737..ce45a96faa0b4c67e7f5b28d474c46276d9a7b40 100644
--- a/e2e/test/scenarios/dashboard-cards/reproductions/32231-add-incompatible-series.cy.spec.js
+++ b/e2e/test/scenarios/dashboard-cards/reproductions/32231-add-incompatible-series.cy.spec.js
@@ -67,21 +67,21 @@ describe("issue 32231", () => {
     cy.wait("@seriesQuery");
 
     cy.findByTestId("add-series-modal").within(() => {
-      cy.get(".LineAreaBarChart").should("exist");
+      cy.get("[data-element-id=line-area-bar-chart]").should("exist");
       cy.findByText(issue32231Error).should("not.exist");
       cy.findByText(multipleSeriesError).should("not.exist");
       cy.findByText(defaultError).should("not.exist");
 
       cy.findByLabelText(incompleteQuestion.name).click();
 
-      cy.get(".LineAreaBarChart").should("not.exist");
+      cy.get("[data-element-id=line-area-bar-chart]").should("not.exist");
       cy.findByText(issue32231Error).should("not.exist");
       cy.findByText(multipleSeriesError).should("exist");
       cy.findByText(defaultError).should("not.exist");
 
       cy.findByLabelText(incompleteQuestion.name).click();
 
-      cy.get(".LineAreaBarChart").should("exist");
+      cy.get("[data-element-id=line-area-bar-chart]").should("exist");
       cy.findByText(issue32231Error).should("not.exist");
       cy.findByText(multipleSeriesError).should("not.exist");
       cy.findByText(defaultError).should("not.exist");
@@ -115,7 +115,7 @@ describe("issue 32231", () => {
     cy.wait("@seriesQuery");
 
     cy.findByTestId("add-series-modal").within(() => {
-      cy.get(".LineAreaBarChart").should("not.exist");
+      cy.get("[data-element-id=line-area-bar-chart]").should("not.exist");
       cy.findByText(issue32231Error).should("not.exist");
       cy.findByText(multipleSeriesError).should("not.exist");
       cy.findByText(defaultError).should("exist");
diff --git a/e2e/test/scenarios/models/models-revision-history.cy.spec.js b/e2e/test/scenarios/models/models-revision-history.cy.spec.js
index 4d12156ce10257e783de3baeaaddbb9f8fb7a759..5916f84f1e0e4d86e161c730245038c89b95574e 100644
--- a/e2e/test/scenarios/models/models-revision-history.cy.spec.js
+++ b/e2e/test/scenarios/models/models-revision-history.cy.spec.js
@@ -19,7 +19,7 @@ describe("scenarios > models > revision history", () => {
     cy.wait("@modelQuery" + ORDERS_BY_YEAR_QUESTION_ID);
 
     cy.location("pathname").should("match", /^\/question\/\d+/);
-    cy.get(".LineAreaBarChart");
+    cy.get("[data-element-id=line-area-bar-chart]");
 
     revertTo("You edited this");
     cy.wait("@modelQuery" + ORDERS_BY_YEAR_QUESTION_ID);
diff --git a/e2e/test/scenarios/models/models.cy.spec.js b/e2e/test/scenarios/models/models.cy.spec.js
index c51415b5e20ae8a7c6b8eae1fbeb4f155d058dac..d7f3de0ce66a7a0baaf865e15fc8344aed77224f 100644
--- a/e2e/test/scenarios/models/models.cy.spec.js
+++ b/e2e/test/scenarios/models/models.cy.spec.js
@@ -167,18 +167,18 @@ describe("scenarios > models", () => {
   it("changes model's display to table", () => {
     visitQuestion(ORDERS_BY_YEAR_QUESTION_ID);
 
-    cy.get(".LineAreaBarChart");
+    cy.get("[data-element-id=line-area-bar-chart]");
     cy.get(".TableInteractive").should("not.exist");
 
     turnIntoModel();
 
     cy.get(".TableInteractive");
-    cy.get(".LineAreaBarChart").should("not.exist");
+    cy.get("[data-element-id=line-area-bar-chart]").should("not.exist");
   });
 
   it("allows to undo turning a question into a model", () => {
     visitQuestion(ORDERS_BY_YEAR_QUESTION_ID);
-    cy.get(".LineAreaBarChart");
+    cy.get("[data-element-id=line-area-bar-chart]");
 
     turnIntoModel();
     // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
@@ -186,7 +186,7 @@ describe("scenarios > models", () => {
     // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
     cy.findByText("Undo").click();
 
-    cy.get(".LineAreaBarChart");
+    cy.get("[data-element-id=line-area-bar-chart]");
     openQuestionActions();
     assertIsQuestion();
   });
@@ -322,7 +322,7 @@ describe("scenarios > models", () => {
       selectFromDropdown("Created At");
 
       visualize();
-      cy.get(".LineAreaBarChart");
+      cy.get("[data-element-id=line-area-bar-chart]");
       // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
       cy.findByText("Save").click();
 
diff --git a/e2e/test/scenarios/visualizations-charts/line_chart.cy.spec.js b/e2e/test/scenarios/visualizations-charts/line_chart.cy.spec.js
index 129e0fed3c99b4c18f1120a1580b2dc4a01647d9..3d1d5276f829c3b34ad62d91c6292dbdb412c2b2 100644
--- a/e2e/test/scenarios/visualizations-charts/line_chart.cy.spec.js
+++ b/e2e/test/scenarios/visualizations-charts/line_chart.cy.spec.js
@@ -232,7 +232,9 @@ describe("scenarios > visualizations > line chart", () => {
       },
     });
 
-    cy.get(".LineAreaBarChart").get(".trend").should("be.visible");
+    cy.get("[data-element-id=line-area-bar-chart]")
+      .get(".trend")
+      .should("be.visible");
   });
 
   it("should show label for empty value series breakout (metabase#32107)", () => {
diff --git a/e2e/test/scenarios/visualizations-charts/reproductions/30058-32075-map-visualizations.cy.spec.js b/e2e/test/scenarios/visualizations-charts/reproductions/30058-32075-map-visualizations.cy.spec.js
index 40df657977a8a62126f2f15d76850ff64d2d6b37..e84247087d3bc5dbabf7a61f8f28b7b471aa85c4 100644
--- a/e2e/test/scenarios/visualizations-charts/reproductions/30058-32075-map-visualizations.cy.spec.js
+++ b/e2e/test/scenarios/visualizations-charts/reproductions/30058-32075-map-visualizations.cy.spec.js
@@ -87,7 +87,7 @@ describe("issue 32075", () => {
     visualize();
 
     cy.get("[data-element-id=pin-map]").should("not.exist");
-    cy.get(".LineAreaBarChart").should("exist");
+    cy.get("[data-element-id=line-area-bar-chart]").should("exist");
   });
 });
 
diff --git a/e2e/test/scenarios/visualizations-tabular/drillthroughs/chart_drill.cy.spec.js b/e2e/test/scenarios/visualizations-tabular/drillthroughs/chart_drill.cy.spec.js
index 1cd255334b245ee17c7800702d696a1d82ef5cff..8ca2925bfcf1ddfe1bfac075e021c1db8c77b924 100644
--- a/e2e/test/scenarios/visualizations-tabular/drillthroughs/chart_drill.cy.spec.js
+++ b/e2e/test/scenarios/visualizations-tabular/drillthroughs/chart_drill.cy.spec.js
@@ -48,7 +48,9 @@ describe("scenarios > visualizations > drillthroughs > chart drill", () => {
 
     queryBuilderMain().within(() => {
       cy.findByLabelText("Legend").findByText("Gadget").should("exist");
-      cy.get(".LineAreaBarChart").findByText("January 2023").should("exist");
+      cy.get("[data-element-id=line-area-bar-chart]")
+        .findByText("January 2023")
+        .should("exist");
     });
 
     cy.wait(100); // wait to avoid grabbing the svg before the chart redraws
@@ -65,7 +67,7 @@ describe("scenarios > visualizations > drillthroughs > chart drill", () => {
     );
 
     queryBuilderMain().within(() => {
-      cy.get(".LineAreaBarChart").findByText("June 2022"); // more granular axis labels
+      cy.get("[data-element-id=line-area-bar-chart]").findByText("June 2022"); // more granular axis labels
 
       // confirm that product category is still broken out
       cy.findByLabelText("Legend").within(() => {
@@ -679,7 +681,10 @@ describe("scenarios > visualizations > drillthroughs > chart drill", () => {
       { visitQuestion: true },
     );
 
-    cy.get(".LineAreaBarChart").get(".dot").first().click({ force: true });
+    cy.get("[data-element-id=line-area-bar-chart]")
+      .get(".dot")
+      .first()
+      .click({ force: true });
     popover().within(() => {
       cy.findByText("See these Orders").should("be.visible");
 
@@ -723,14 +728,20 @@ describe("scenarios > visualizations > drillthroughs > chart drill", () => {
       { visitQuestion: true },
     );
 
-    cy.get(".LineAreaBarChart").findAllByTestId("legend-item").first().click();
+    cy.get("[data-element-id=line-area-bar-chart]")
+      .findAllByTestId("legend-item")
+      .first()
+      .click();
 
     popover().within(() => {
       cy.findByText("See these Orders").should("be.visible");
       cy.findByText("Automatic insights…").should("be.visible");
     });
 
-    cy.get(".LineAreaBarChart").get(".bar").first().click({ force: true });
+    cy.get("[data-element-id=line-area-bar-chart]")
+      .get(".bar")
+      .first()
+      .click({ force: true });
     popover().within(() => {
       cy.findByText("See these Orders").should("be.visible");
 
diff --git a/frontend/src/metabase/css/dashboard.module.css b/frontend/src/metabase/css/dashboard.module.css
index 858a9dae0698db0527759f50adfdcb282a973073..ed3b96a0641337188cff22e0f577629476a53266 100644
--- a/frontend/src/metabase/css/dashboard.module.css
+++ b/frontend/src/metabase/css/dashboard.module.css
@@ -217,7 +217,7 @@
 
 .Dashboard :global(text.value-label),
 .Dashboard :global(text.value-label-white),
-.Dashboard :global(.LineAreaBarChart .dc-chart .axis text) {
+.Dashboard .LineAreaBarChart :global(.dc-chart .axis text) {
   font-size: 12px;
 }
 
diff --git a/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx b/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
index d62ed38a70245ad4d34bc18bebcc3eb6082725b1..5b2924c4391c63ee3b5e4a9e9b0398a5da482ae9 100644
--- a/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
+++ b/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
@@ -5,9 +5,8 @@ import { Component } from "react";
 import { t } from "ttag";
 import _ from "underscore";
 
-import "./LineAreaBarChart.module.css";
-
 import CS from "metabase/css/core/index.css";
+import DashboardS from "metabase/css/dashboard.module.css";
 import { getAccentColors } from "metabase/lib/colors/groups";
 import { NULL_DISPLAY_VALUE } from "metabase/lib/constants";
 import { formatValue } from "metabase/lib/formatting";
@@ -23,6 +22,7 @@ import { getFriendlyName, MAX_SERIES } from "metabase/visualizations/lib/utils";
 import { isDimension, isMetric } from "metabase-lib/v1/types/utils/isa";
 
 import CardRenderer from "./CardRenderer";
+import LineAreaBarChartS from "./LineAreaBarChart.module.css";
 import {
   LineAreaBarChartRoot,
   ChartLegendCaption,
@@ -92,12 +92,17 @@ export default class LineAreaBarChart extends Component {
     if (hovered && hovered.index != null) {
       const seriesClasses = _.range(0, MAX_SERIES)
         .filter(n => n !== hovered.index)
-        .map(n => "mute-" + n);
+        .map(n => {
+          if (n === 0) {
+            return LineAreaBarChartS.LineAreaBarChartMute0;
+          }
+          return "mute-" + n;
+        });
       const axisClasses =
         hovered.axisIndex === 0
-          ? "mute-yr"
+          ? LineAreaBarChartS.LineAreaBarChartMuteYr
           : hovered.axisIndex === 1
-          ? "mute-yl"
+          ? LineAreaBarChartS.LineAreaBarChartMuteYl
           : null;
       return seriesClasses.concat(axisClasses);
     } else {
@@ -261,8 +266,10 @@ export default class LineAreaBarChart extends Component {
 
     return (
       <LineAreaBarChartRoot
+        data-element-id="line-area-bar-chart"
         className={cx(
-          "LineAreaBarChart",
+          DashboardS.LineAreaBarChart,
+          LineAreaBarChartS.LineAreaBarChart,
           this.getHoverClasses(),
           this.props.className,
         )}
@@ -296,7 +303,10 @@ export default class LineAreaBarChart extends Component {
             {...this.props}
             series={orderedSeries}
             settings={this.getSettings()}
-            className={cx("renderer", CS.flexFull)}
+            className={cx(
+              LineAreaBarChartS.LineAreaBarChartRenderer,
+              CS.flexFull,
+            )}
             maxSeries={MAX_SERIES}
             renderer={this.constructor.renderer}
           />
diff --git a/frontend/src/metabase/visualizations/components/LineAreaBarChart.module.css b/frontend/src/metabase/visualizations/components/LineAreaBarChart.module.css
index 3c519d49c6765cb1fa79708b841c76b2308a348c..286ca812d67ad554a70f48efb97fc7a2f27770b3 100644
--- a/frontend/src/metabase/visualizations/components/LineAreaBarChart.module.css
+++ b/frontend/src/metabase/visualizations/components/LineAreaBarChart.module.css
@@ -1,4 +1,4 @@
-:global(.LineAreaBarChart .renderer) {
+.LineAreaBarChart .LineAreaBarChartRenderer {
   margin-top: -5px;
   margin-left: -0.5em;
   margin-right: -0.5em;
@@ -6,230 +6,227 @@
   overflow: hidden;
 }
 
-:global(.LineAreaBarChart .dc-chart .grid-line.horizontal) {
+/* `.dc-chart` is a global class from dc.js */
+.LineAreaBarChart :global(.dc-chart .grid-line.horizontal) {
   stroke: var(--color-text-medium) !important;
   opacity: 1 !important;
   stroke-dasharray: 3, 5;
 }
 
-:global(.LineAreaBarChart .dc-chart .axis) {
+.LineAreaBarChart :global(.dc-chart .axis) {
   z-index: -1;
 }
 
-:global(.LineAreaBarChart .dc-chart .axis text) {
+.LineAreaBarChart :global(.dc-chart .axis text) {
   font-size: 12px;
   font-family: var(--default-font-family), sans-serif;
   font-weight: 700;
 }
 
-:global(.LineAreaBarChart .dc-chart .axis .domain),
-:global(.LineAreaBarChart .dc-chart .axis .tick line) {
+.LineAreaBarChart :global(.dc-chart .axis .domain),
+.LineAreaBarChart :global(.dc-chart .axis .tick line) {
   stroke: var(--color-border);
 }
 
-:global(.LineAreaBarChart .dc-chart .axis .tick text) {
+.LineAreaBarChart :global(.dc-chart .axis .tick text) {
   fill: var(--color-text-medium);
 }
 
-:global(.LineAreaBarChart .dc-chart g.row text.outside) {
+.LineAreaBarChart :global(.dc-chart g.row text.outside) {
   fill: var(--color-text-medium);
   font-weight: 700;
 }
 
-:global(.LineAreaBarChart .dc-chart g.row text.inside) {
+.LineAreaBarChart :global(.dc-chart g.row text.inside) {
   fill: white;
   font-weight: bold;
 }
 
 /* turn off ticks and domain lines */
-:global(.LineAreaBarChart .dc-chart .axis.y .domain),
-:global(.LineAreaBarChart .dc-chart .axis.yr .domain),
-:global(.LineAreaBarChart .dc-chart .axis.y .tick line),
-:global(.LineAreaBarChart .dc-chart .axis.yr .tick line) {
+.LineAreaBarChart :global(.dc-chart .axis.y .domain),
+.LineAreaBarChart :global(.dc-chart .axis.yr .domain),
+.LineAreaBarChart :global(.dc-chart .axis.y .tick line),
+.LineAreaBarChart :global(.dc-chart .axis.yr .tick line) {
   display: none;
 }
 
-:global(.LineAreaBarChart .dc-chart .x-axis-label),
-:global(.LineAreaBarChart .dc-chart .y-axis-label) {
+.LineAreaBarChart :global(.dc-chart .x-axis-label),
+.LineAreaBarChart :global(.dc-chart .y-axis-label) {
   fill: var(--color-text-dark);
   font-size: 12px;
   font-weight: 700;
 }
 
 /* disable grid lines */
-:global(.LineAreaBarChart .dc-chart .tick line) {
+.LineAreaBarChart :global(.dc-chart .tick line) {
   display: none;
 }
 
 /* enabled grid lines for row charts */
-:global(.LineAreaBarChart .dc-chart .rowChart .tick .grid-line) {
+.LineAreaBarChart :global(.dc-chart .rowChart .tick .grid-line) {
   display: inherit;
 }
 
 /* restyle grid-line for 0 to look like X axis */
-:global(.LineAreaBarChart .dc-chart .stacked line.zero) {
+.LineAreaBarChart :global(.dc-chart .stacked line.zero) {
   stroke: var(--color-text-light);
   opacity: 1;
   stroke-dasharray: none;
 }
 
 /* restyle X axis for stacked charts to look like a grid line */
-:global(.LineAreaBarChart .dc-chart .stacked .domain) {
+.LineAreaBarChart :global(.dc-chart .stacked .domain) {
   stroke: color-mod(var(--color-text-medium) alpha(-80%));
   stroke-dasharray: 5, 5;
 }
 
 /* gridline at 0 overlaps with X axis */
-:global(.LineAreaBarChart .dc-chart .grid-line.horizontal line:first-child) {
+.LineAreaBarChart :global(.dc-chart .grid-line.horizontal line:first-child) {
   display: none;
 }
 
 /* disable pointer events on all chart elements while dragging to avoid weird interactions */
-:global(.LineAreaBarChart .dc-chart .dragging .area),
-:global(.LineAreaBarChart .dc-chart .dragging .bar),
-:global(.LineAreaBarChart .dc-chart .dragging .line),
-:global(.LineAreaBarChart .dc-chart .dragging .dot),
-:global(.LineAreaBarChart .dc-chart .dragging .row),
-:global(.LineAreaBarChart .dc-chart .dragging .bubble),
-:global(.LineAreaBarChart .dc-chart .dragging .voronoi) {
+.LineAreaBarChart :global(.dc-chart .dragging .area),
+.LineAreaBarChart :global(.dc-chart .dragging .bar),
+.LineAreaBarChart :global(.dc-chart .dragging .line),
+.LineAreaBarChart :global(.dc-chart .dragging .dot),
+.LineAreaBarChart :global(.dc-chart .dragging .row),
+.LineAreaBarChart :global(.dc-chart .dragging .bubble),
+.LineAreaBarChart :global(.dc-chart .dragging .voronoi) {
   pointer-events: none !important;
 }
 
 /* disable dc default behavior */
-:global(.LineAreaBarChart .dc-chart rect.bar:hover) {
+.LineAreaBarChart :global(.dc-chart rect.bar:hover) {
   fill-opacity: 1;
 }
 
-:global(.LineAreaBarChart .dc-chart g.row rect) {
+.LineAreaBarChart :global(.dc-chart g.row rect) {
   fill-opacity: 1;
 }
 
 /* highlight single series bar and row charts */
-:global(.LineAreaBarChart.mute-0 .dc-chart rect.bar:hover),
-:global(.LineAreaBarChart.mute-0 .dc-chart g.row:hover) {
+.LineAreaBarChart.LineAreaBarChartMute0 :global(.dc-chart rect.bar:hover),
+.LineAreaBarChart.LineAreaBarChartMute0 :global(.dc-chart g.row:hover) {
   opacity: 1 !important;
 }
 
-:global(.LineAreaBarChart .dc-chart circle.bubble) {
+.LineAreaBarChart :global(.dc-chart circle.bubble) {
   fill-opacity: 0.8;
   stroke-width: 1;
   stroke: white;
 }
 
-:global(.LineAreaBarChart .dc-chart .enable-dots .dc-tooltip .dot:hover),
-:global(.LineAreaBarChart .dc-chart .enable-dots .dc-tooltip .dot.hover) {
+.LineAreaBarChart :global(.dc-chart .enable-dots .dc-tooltip .dot:hover),
+.LineAreaBarChart :global(.dc-chart .enable-dots .dc-tooltip .dot.hover) {
   fill: currentColor;
 }
 
 /* line width = 2px (default) */
-:global(.LineAreaBarChart .dc-chart .line) {
+.LineAreaBarChart :global(.dc-chart .line) {
   stroke-width: 2px;
 }
 
-:global(.LineAreaBarChart .dc-chart .dc-tooltip .dot) {
+.LineAreaBarChart :global(.dc-chart .dc-tooltip .dot) {
   r: 3px !important;
   stroke-width: 2px;
 }
 
 /* line width = 3px */
-:global(.LineAreaBarChart .dc-chart .line--medium .line) {
+.LineAreaBarChart :global(.dc-chart .line--medium .line) {
   stroke-width: 3px;
 }
 
-:global(.LineAreaBarChart .dc-chart .line--medium .dc-tooltip .dot) {
+.LineAreaBarChart :global(.dc-chart .line--medium .dc-tooltip .dot) {
   r: 3px !important;
   stroke-width: 2px;
 }
 
 /* line width = 4px */
-:global(.LineAreaBarChart .dc-chart .line--heavy .line) {
+.LineAreaBarChart :global(.dc-chart .line--heavy .line) {
   stroke-width: 4px;
 }
 
-:global(.LineAreaBarChart .dc-chart .line--heavy .dc-tooltip .dot) {
+.LineAreaBarChart :global(.dc-chart .line--heavy .dc-tooltip .dot) {
   r: 3.5px !important;
   stroke-width: 3px;
 }
 
-:global(.LineAreaBarChart .dc-chart .enable-dots .dc-tooltip .dot),
-:global(.LineAreaBarChart .dc-chart .dc-tooltip .dot.selected),
-:global(.LineAreaBarChart
-    .dc-chart
-    .enable-dots-onhover
-    .dc-tooltip
-    .dot:hover),
-:global(.LineAreaBarChart
-    .dc-chart
-    .enable-dots-onhover
-    .dc-tooltip
-    .dot.hover) {
+.LineAreaBarChart :global(.dc-chart .enable-dots .dc-tooltip .dot),
+.LineAreaBarChart :global(.dc-chart .dc-tooltip .dot.selected),
+.LineAreaBarChart
+  :global(.dc-chart .enable-dots-onhover .dc-tooltip .dot:hover),
+.LineAreaBarChart
+  :global(.dc-chart .enable-dots-onhover .dc-tooltip .dot.hover) {
   fill: white;
   stroke: currentColor;
   fill-opacity: 1 !important;
   stroke-opacity: 1 !important;
 }
 
-:global(.LineAreaBarChart .dc-chart .dc-tooltip .dot.deselected) {
+.LineAreaBarChart :global(.dc-chart .dc-tooltip .dot.deselected) {
   opacity: 0;
 }
 
-:global(.LineAreaBarChart .dc-chart .line.deselected) {
+.LineAreaBarChart :global(.dc-chart .line.deselected) {
   color: var(--color-text-light);
 }
 
-:global(.LineAreaBarChart .dc-chart .area),
-:global(.LineAreaBarChart .dc-chart .bar),
-:global(.LineAreaBarChart .dc-chart .line),
-:global(.LineAreaBarChart .dc-chart .dot),
-:global(.LineAreaBarChart .dc-chart .row),
-:global(.LineAreaBarChart .dc-chart .bubble) {
+.LineAreaBarChart :global(.dc-chart .area),
+.LineAreaBarChart :global(.dc-chart .bar),
+.LineAreaBarChart :global(.dc-chart .line),
+.LineAreaBarChart :global(.dc-chart .dot),
+.LineAreaBarChart :global(.dc-chart .row),
+.LineAreaBarChart :global(.dc-chart .bubble) {
   transition: opacity 0.15s linear;
 }
 
-:global(.LineAreaBarChart .dc-chart .axis.y),
-:global(.LineAreaBarChart .dc-chart .y-axis-label),
-:global(.LineAreaBarChart .dc-chart .axis.yr),
-:global(.LineAreaBarChart .dc-chart .yr-axis-label) {
+.LineAreaBarChart :global(.dc-chart .axis.y),
+.LineAreaBarChart :global(.dc-chart .y-axis-label),
+.LineAreaBarChart :global(.dc-chart .axis.yr),
+.LineAreaBarChart :global(.dc-chart .yr-axis-label) {
   transition: opacity 0.25s linear;
 }
 
 /* :global .mute-* selectors dynamically generated in LineAreaBarChart.js */
 
-:global(.LineAreaBarChart.mute-yl .dc-chart .axis.y),
-:global(.LineAreaBarChart.mute-yl .dc-chart .y-axis-label.y-label) {
+.LineAreaBarChart.LineAreaBarChartMuteYl :global(.dc-chart .axis.y),
+.LineAreaBarChart.LineAreaBarChartMuteYl
+  :global(.dc-chart .y-axis-label.y-label) {
   opacity: 0;
 }
 
-:global(.LineAreaBarChart.mute-yr .dc-chart .axis.yr),
-:global(.LineAreaBarChart.mute-yr .dc-chart .y-axis-label.yr-label) {
+.LineAreaBarChart.LineAreaBarChartMuteYr :global(.dc-chart .axis.yr),
+.LineAreaBarChart.LineAreaBarChartMuteYr
+  :global(.dc-chart .y-axis-label.yr-label) {
   opacity: 0;
 }
 
-:global(.LineAreaBarChart .dc-chart .voronoi) {
+.LineAreaBarChart :global(.dc-chart .voronoi) {
   fill: transparent;
 }
 
-:global(.LineAreaBarChart .dc-chart .voronoi-drill) {
+.LineAreaBarChart :global(.dc-chart .voronoi-drill) {
   cursor: pointer;
 }
 
 /* grid lines aren't clickable, and get in the way of the brush */
-:global(.LineAreaBarChart .dc-chart .grid-line) {
+.LineAreaBarChart :global(.dc-chart .grid-line) {
   pointer-events: none;
 }
 
 /* brush handles */
-:global(.LineAreaBarChart .dc-chart .brush .resize path) {
+.LineAreaBarChart :global(.dc-chart .brush .resize path) {
   fill: var(--color-bg-light);
   stroke: var(--color-text-medium);
 }
 
-:global(.LineAreaBarChart .dc-chart .goal .line) {
+.LineAreaBarChart :global(.dc-chart .goal .line) {
   stroke: var(--color-text-medium);
   stroke-dasharray: 3, 5;
 }
 
-:global(.LineAreaBarChart .dc-chart .trend .line) {
+.LineAreaBarChart :global(.dc-chart .trend .line) {
   stroke-dasharray: 3, 5;
 }
 
@@ -254,42 +251,38 @@
 
 /* timeline events */
 
-:global(.LineAreaBarChart .dc-chart .event-axis .event-tick) {
+.LineAreaBarChart :global(.dc-chart .event-axis .event-tick) {
   cursor: pointer;
   pointer-events: all;
 }
 
 /* Overrides dc:global .js styles */
-:global(.LineAreaBarChart .dc-chart .event-axis .event-icon path) {
+.LineAreaBarChart :global(.dc-chart .event-axis .event-icon path) {
   fill: var(--color-text-light);
   stroke: unset;
   shape-rendering: geometricPrecision;
 }
 
-:global(.LineAreaBarChart .dc-chart .event-axis .event-text) {
+.LineAreaBarChart :global(.dc-chart .event-axis .event-text) {
   fill: var(--color-text-light);
 }
 
-:global(.LineAreaBarChart
-    .dc-chart
-    .event-axis
-    .event-tick.hover
-    .event-icon
-    path) {
+.LineAreaBarChart
+  :global(.dc-chart .event-axis .event-tick.hover .event-icon path) {
   fill: var(--color-brand);
 }
 
-:global(.LineAreaBarChart .dc-chart .event-axis .event-tick.hover .event-text) {
+.LineAreaBarChart :global(.dc-chart .event-axis .event-tick.hover .event-text) {
   fill: var(--color-brand);
 }
 
-:global(.LineAreaBarChart .dc-chart .event-line) {
+.LineAreaBarChart :global(.dc-chart .event-line) {
   transition: stroke 0.15s linear;
   stroke: color-mod(var(--color-text-medium) alpha(-80%));
   stroke-width: 2;
   pointer-events: none;
 }
 
-:global(.LineAreaBarChart .dc-chart .event-line.hover) {
+.LineAreaBarChart :global(.dc-chart .event-line.hover) {
   stroke: var(--color-brand);
 }