Hover state color override for maps in dashboards

[timhighcharts]

I'm unable to figure out where to apply 'hover' state override to a map component in a dashboard layout.

I want to achieve the same result as this example: on hover the polygon is set yellow.
https://www.highcharts.com/demo/maps/map-drilldown

Can someone please create a fiddle that produces the same result in this example.
https://www.highcharts.com/demo/dashboards/election

I've tried 'plotOptions' under 'chartOptions',
'states' in the 'series', nothing works.

[dawid.d]

Hello,

Welcome to the Highcharts forum and thanks for the question!

It seems that your issue might be due to rendering the chart in styled mode, which is enabled by default for Dashboards. Styled mode causes most inline styles (from JS options) to be ignored in favor of styling element classes in CSS. Because of this, you can either disable styled mode, which isn't fully recommended (as you'll lose features like dark mode support out of the box) or simply set the appropriate style on the `highcharts-point-hover` element, as shown in the demo below.

Demo: https://jsfiddle.net/BlackLabel/gcymatz1/

Let me know if this resolves your problem.

Best regards

[timhighcharts]

Thank you for the fast reply.

I did spend a couple of hours stepping through the HC code [hard to follow coming in fresh] and figured out styledMode was impacting things, and then googled for references to it.
e.g. viewtopic.php?t=43398

I did try setting styledMode = false, and verified it was false, and still could not get states.hover.color to work.
Just for the sake of completing my experimenting can you please provide a fiddle with states.hover.color override working on a dashboard map component.

Code: Select all

      chartOptions: {
      ...
        chart: {
          styledMode: true
        },
       }

[timhighcharts]

I set charts.styledMode = false and remove the css .highcharts-point-hover and the plotOptions.map.states.hover is not applied.

[timhighcharts]

Sorted it!

I was still importing highcharts.css

Have now cloned it and customised and specifying each data point color via a 'color' row value works as expected,
leaving styledMode = true

[dawid.d]

Hi again,

I'm glad you managed to solve the problem and thank you very much for your input; we'll try to improve the visibility of the styled mode issue in Dashboards so that it's not so confusing when first start working with Dashboards with the Highcharts Components.

If I may clarify any other issues/matters I am at your disposal.
Best regards