Is there a way to change dash style of plot line on hover in highcharts?

Question

I want to change the dashStyle for a plot line when user hovers overs it.

JSfiddle - https://jsfiddle.net/sharadkalya/5z1w06pL/17/

What I've tried is as follows:

plotOptions: {
    series: {
        states: {
            hover: {
                enabled: true,
                lineWidth: 5,
                line: {
                    dashStyle: "dash"
                },
                dashStyle: "dash",
            }
        }
    },
},

With this lineWidth is changing, but the dashStyle is not changing for the plotline.

Answer 1

There is no options like line and dashStyle in plotOptions.series.states.hover. You have to write callback on plotOptions.series.point.events.mouseOver and plotOptions.series.point.events.mouseOut. See the following example.

Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: true,
                    lineWidth: 5
                }
            }
        },
    },

    series: [{
    events: {
        mouseOver: function() {
          this.update({
            dashStyle: 'dash'
          });
        },
        mouseOut: function() {
          this.update({
            dashStyle: 'Solid'
          });
        }
      },
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>