Disable hover on HighCharts

Question

I have building a pie chart using HighCharts library, and here is my chart:

 // http://jsfiddle.net/t2MxW/20890/

    var chart = new Highcharts.Chart({
                 


        

Answer 1

The title of the question is about disabling hovering, so in case anyone else finds themselves here for that purpose, I'll elaborate on @SergeyB's answer.

There are a few options that affect how mouse hovering changes a series' styling. They each have different effects depending on the series type. I'll talk about line and pie series here, but generally, you can look under plotOptions..states.hover for styling applied to the currently hovered series and plotOptions..states.inactive for styling applied to the non-hovered series (e.g. plotOptions.pie.states.hover). None of these options affect the tooltip styling.

plotOptions.series.states.inactive

plotOptions.series.states.inactive affects the styling applied to all series that aren't currently being hovered over. To prevent them from fading into the background, set plotOptions.series.states.inactive.opacity to 1.

var chartOptions = {
    // ...
    plotOptions: {
        series: {
            states: {
                inactive: {
                    opacity: 1,
                },
            },
        },
    },
}

jsFiddle for line

jsFiddle for pie

plotOptions.series.states.hover

plotOptions.series.states.hover affects the styling applied to the series that's being hovered over. For example, for a line series, the default is to thicken the line width and apply a halo to the nearest point.

To disable any styling of a currently hovered line series, set plotOptions.series.states.hover.enabled to false.

var chartOptions = {
    // ...
    chart: {
        type: "line",
    },
    plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false,
                },
            },
        },
    },
}

jsFiddle

Unfortunately, if we set this on a pie series, this will make the hovered slice fade into the background with the rest of the inactive slices (see this jsFiddle for an example). If we want to remove all hover styling without affecting the inactive styling, we can set plotOptions.series.states.hover.halo.size to 0 (which removes the halo) and plotOptions.pie.states.hover.brightness to 0 (which removes the brightening effect). Note that since brightness is specific to pie series, it's documented under plotOptions.pie instead of plotOptions.series (though it worked for me even when I added it under plotOptions.series).

var chartOptions = {
    // ...
    chart: {
        type: "pie",
    },
    plotOptions: {
        series: {
            states: {
                hover: {
                    halo: {
                        size: 0,
                    },
                    // this worked for me even though it's not
                    // documented under plotOptions.series:
                    //brightness: 0,
                },
            },
        },
        pie: {
            states: {
                hover: {
                    brightness: 0,
                },
            },
        },
    },
}

jsFiddle

plotOptions.series.stickyTracking

If you're using a line or area series, you may have noticed that as soon as you hover over the chart, even if you're not touching a series, the nearest series will receive hover styling and the rest will receive inactive styling. This is because plotOptions.series.stickyTracking is true by default for line and area series. If you set plotOptions.series.stickyTracking to false, hover and inactive styling will only be applied while you're hovering over a line.

var chartOptions = {
    // ...
    chart: {
        type: "line",
    },
    plotOptions: {
        series: {
            stickyTracking: false,
        },
    },
}

jsFiddle

plotOptions.series.enableMouseTracking

As @ninedozen noted, you can completely disable all responsive interactions based on mouse movement by setting plotOptions.series.enableMouseTracking to false. Note that this will also disable tooltips in addition to hover/inactive styling.

Options scope

To apply these options to all series in the entire chart, place them under plotOptions.series. To apply them only to certain series types (or if the option is specific to a certain series), place them under plotOptions.. To apply them to a specific series, place them inside that series' options.

var chartOptions = {
    series: [
        {
            name: "series1",
            type: "line",
            data: [...],
            // these options will only apply to series1, not series2 or series3
            states: {...},
        },
        {
            name: "series2",
            type: "line"
            data: [...],
        },
        {
            name: "series3",
            type: "pie"
            data: [...],
        }
    ],
    plotOptions: {
        // these options will apply to all series in the chart
        series: {states: {...}},
        // these options will only apply to series of type line
        // i.e. series1 and series2
        line: {states: {...}}
    }
}