CODEWITHSUNDEEP
javascripthighcharts
Shark7
Shark7

Reputation: 569

Highcharts - how to disable color change on mouseover/hover

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.

Upvotes: 5

Views: 5398

Answers (3)

Miguel Garrido
Miguel Garrido

Reputation: 1151

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

Upvotes: 2

jlbriggs
jlbriggs

Reputation: 17800

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:

Upvotes: 1

Stephen Gilboy
Stephen Gilboy

Reputation: 5835

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

Upvotes: 6

Related Questions