diff --git a/frontend/src/metabase/css/dashboard.css b/frontend/src/metabase/css/dashboard.css
index 560e4ef7d5f4ac995d33051039a299017942c749..4c26d6f34bd4e5afb627fb117076ca2f9f8c66a5 100644
--- a/frontend/src/metabase/css/dashboard.css
+++ b/frontend/src/metabase/css/dashboard.css
@@ -331,8 +331,13 @@
   display: none;
 }
 
+/* disable dc default behavior */
 .dc-chart rect.bar:hover {
-  fill-opacity: 1;
+  fill-opacity: 1 !important;
+}
+/* highlight single series bar */
+.mute-0 .dc-chart rect.bar:hover {
+  opacity: 1 !important;
 }
 
 .enable-dots .dc-tooltip circle.dot {
@@ -392,6 +397,12 @@
 .mute-3 svg > g > .chart-body .stack._3 .line,
 .mute-4 svg > g > .chart-body .stack._4 .line,
 .mute-5 svg > g > .chart-body .stack._5 .line,
+.mute-0 svg > g > .chart-body .stack._0 .bar,
+.mute-1 svg > g > .chart-body .stack._1 .bar,
+.mute-2 svg > g > .chart-body .stack._2 .bar,
+.mute-3 svg > g > .chart-body .stack._3 .bar,
+.mute-4 svg > g > .chart-body .stack._4 .bar,
+.mute-5 svg > g > .chart-body .stack._5 .bar,
 .mute-0 svg > g > .chart-body .dc-tooltip._0 .dot,
 .mute-1 svg > g > .chart-body .dc-tooltip._1 .dot,
 .mute-2 svg > g > .chart-body .dc-tooltip._2 .dot,
diff --git a/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js b/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
index 14ac6bf4aef2f14542488f424997ddebb7db50db..1fcdd1497b10b2e13b8fad777f8e23228ef9e186 100644
--- a/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
+++ b/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
@@ -261,6 +261,8 @@ function applyChartTooltips(chart, series, onHoverChange) {
     chart.on("renderlet.tooltips", function(chart) {
         chart.selectAll(".bar, .dot, .area, .line, .bubble, g.pie-slice, g.features")
             .on("mousemove", function(d, i) {
+                const isSingleSeriesBar = this.classList.contains("bar") && series.length === 1;
+
                 let data;
                 if (Array.isArray(d.key)) { // scatter
                     data = d.key.map((value, index) => (
@@ -274,7 +276,8 @@ function applyChartTooltips(chart, series, onHoverChange) {
                 }
 
                 onHoverChange && onHoverChange({
-                    index: determineSeriesIndexFromElement(this),
+                    // for single series bar charts, fade the series and highlght the hovered element with CSS
+                    index: isSingleSeriesBar ? -1 : determineSeriesIndexFromElement(this),
                     element: this,
                     d: d,
                     data: data && _.uniq(data, (d) => d.col)