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.

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]
  ]
},

Answer 2

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/