Highcharts - how to disable color change on mouseover/hover

Question

I have a Highcharts columnrange chart for which I'd like to disable the color change on mouseover or hover.

I've seen others ask similar questions, and I tried to adding this section of code (which didn't fix the problem):

    series: {
        states: {
            hover: {
                enabled: false
            }
        }
    },

Here's the chart's entire code: http://jsfiddle.net/x7uz7puv/2/

Thanks in advance for your help.

Accumbent

Answer 1

Add that code to the series object you already have.

series: [{
  type: 'columnrange',
  color: '#00FFFF',
  name: '25th to 75th percentile',
  states: { hover: { enabled: false } }, // Here is where it goes
  data: [
    [27000, 55100],
    [25900, 58500]
  ]
},

Stutz

Answer 2

Though this is an old question what worked for me, using Highchart 10.3.3 and working with an area chart type. My workaround was the following:

series: [
  {
    name: 'your-serie-1',
    data: [1,2,3],
    states: {
      inactive: {
        enabled: false // Here is where it goes
      }
    }
  }
]

Further reading: https://api.highcharts.com/highstock/
https://api.highcharts.com/highcharts/series.area.states.inactive

Concinnate

Answer 3

Right now you have that code at the top level of your config object, where it doesn't work. The series object is an array of the chart series, so even if setting the option worked in that manner, it would be overwritten by your actual series object.

It needs to either be set on the individual series level, as Stephen answered, or more globally, under the plotOptions.

By applying it to the individual series, you will need to repeat the code for every series you have.

By putting it in the plotOptions, with the series designation, you only need to specify it once, no matter how many series you have.

plotOptions: {
  series: {
    states: {
      hover: {
        enabled: false
      }
    }
  }
} 

Or, if you wanted it to apply to only certain series types, you could add it to only the series type you want it to apply to:

plotOptions: {
  columnrange: {
    states: {
      hover: {
        enabled: false
      }
    }
  }
} 

Updated fiddle:

• http://jsfiddle.net/jlbriggs/kmn0aqvo/

Guacin