Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts Change column color on hover

It seems like this should be simple, but I cannot figure it out and nothing in the API documentation seems to be working. I want to change the color of a single column when that column is hovered.

I have tried setting each point in the data to have a hover state with colorFill, but to no avail, i have also tried setting it in plotOptions in the column attribute

Here is a little something to help: http://jsfiddle.net/TheSharpieOne/DMcQ3/

Tried this: http://api.highcharts.com/highcharts#series.data.marker.states.hover.fillColor
Tried this: http://api.highcharts.com/highcharts#plotOptions.column.states.hover.marker.fillColor
Both did not work. Not sure what else to do.

I found this: Highcharts: changing color on hover ranking chart but it changes the whole series, not just the current point/column.

like image 810
TheSharpieOne Avatar asked Oct 02 '13 20:10

TheSharpieOne


1 Answers

You were almost there, but you want to set color and not fillColor (and not on the marker)-- I added this to the chart declaration:

plotOptions: {
    column: {
        states: {
            hover: {
                color: '#000000'                                                           
            }
        }
    }
}

And removed the states stuff from the column data, that seems to work in this fiddle.

And, yes, that's not very clear in the documentation ...

like image 175
SpaceDog Avatar answered Oct 18 '22 07:10

SpaceDog