I am using the latest version of HighCharts to build a chart with multiple trends. By default HighCharts increases the thickness / lineWidth of a line when the user's mouse hovers over it. Because I could have ~10 trends on the chart I would like to remove this feature, meaning that the thickness of the line does not change on hover.

jsFiddle of code so far

I believe I need to set this in the plotOptions{} section. I have tried adding the following without success:

plotOptions: {
    series: {
        mouseOver: {
            lineWidth: 2
        }
    },
    marker: {
        enabled: false,
        states: {
            hover: {
                lineWidth: 2
            }
        }
    }
},

I would, however, like to retain the marker that denotes where the mouse of positioned:

I am using the latest version of HighCharts to build a chart with multiple trends. By default HighCharts increases the thickness / lineWidth of a line when the user's mouse hovers over it. Because I could have ~10 trends on the chart I would like to remove this feature, meaning that the thickness of the line does not change on hover.

jsFiddle of code so far

I believe I need to set this in the plotOptions{} section. I have tried adding the following without success:

plotOptions: {
    series: {
        mouseOver: {
            lineWidth: 2
        }
    },
    marker: {
        enabled: false,
        states: {
            hover: {
                lineWidth: 2
            }
        }
    }
},

I would, however, like to retain the marker that denotes where the mouse of positioned:

• javascript
• jquery
• html
• css
• highcharts

• 1 You can set a lineWidth as 1, jsfiddle.net/4oypoeom/5. – Sebastian Bochan Commented Mar 25, 2015 at 11:29

2 Answers 2

Make this below change (Set the states mouseover to disabled state)

plotOptions: {
            series: {
                    lineWidth: 2,
                 states: {
                    hover: {
                        enabled: false
                    }
                }
            },

DEMO

In that case make lineWidth: 1 for hover

plotOptions: {
            series: {
                    lineWidth: 2,
                 states: {
                    hover: {
                        lineWidth: 1
                    }
                }

DEMO 2

What you need here is the lineWidthPlus property.

plotOptions: {
  series: {
    states: {
      hover: {
        lineWidthPlus: 0
     }
    }
  }
}

This way, no matter what else you change, the chart will not change the lineWidth when hovered.

API Reference:

• http://api.highcharts.com/highcharts#plotOptions.series.states.hover.lineWidthPlus

Your fiddle updated:

• http://jsfiddle.net/jlbriggs/4oypoeom/8/