Disable hover effects on series, tooltips, and click events on the le…

…gend
ONSdigital · Feb 27, 2025 · c61e645 · c61e645
1 parent f9086f6
commit c61e645
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/src/components/chart/chart.js b/src/components/chart/chart.js
@@ -43,7 +43,10 @@ class HighchartsBaseChart {
         for (const option in specificChartOptions) {
             this.config[option] = specificChartOptions[option];
         }
+        // Add the line chart plotOptions to the config - merge with
+        // any existing plotOptions
         this.config.plotOptions = {
+            ...(Highcharts.getOptions()?.plotOptions || {}),
             line: new LineChartPlotOptions().plotOptions.line,
         };
     };

diff --git a/src/components/chart/common-chart-options.js b/src/components/chart/common-chart-options.js
@@ -64,6 +64,19 @@ class CommonChartOptions {
                 tickLength: 6,
                 tickColor: this.constants.gridLineColor,
             },
+            plotOptions: {
+                series: {
+                    // disabes the tooltip on hover
+                    enableMouseTracking: false,
+
+                    // disables the legend item hover
+                    states: {
+                        inactive: {
+                            enabled: false,
+                        },
+                    },
+                },
+            },
             // Adjust font size for smaller width of chart
             // Note this is not the same as the viewport width
             responsive: {

diff --git a/src/components/chart/line-chart.js b/src/components/chart/line-chart.js
@@ -11,11 +11,6 @@ class LineChartPlotOptions {
                 marker: {
                     enabled: false,
                 },
-                states: {
-                    hover: {
-                        lineWidth: 3,
-                    },
-                },
             },
         };
     }

diff --git a/src/components/chart/specific-chart-options.js b/src/components/chart/specific-chart-options.js
@@ -22,6 +22,14 @@ class SpecificChartOptions {
                     fontSize: this.constants.desktopFontSize,
                     fontWeight: 'normal',
                 },
+                // Disable click event on legend
+                // There is currently an issue because the legend items are still buttons
+                // and therefore the screen reader still announces that they can be clicked
+                events: {
+                    itemClick: () => {
+                        return false;
+                    },
+                },
             },
         };
     }