如何动态更改highchart的栏悬停颜色？

Question

I set bar hover color using below code:

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

But how can I change the bar hover color dynamically?

Answer 1

Defined set of colors, when you load charts every time you will experience a different color of hover effect from the given set

var colors= ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', 
   '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'];


    var x = Math.floor((Math.random() * 10) );

            plotOptions: {
                column: {
                    states: {
                        hover: {
                            color: colors[x]                                                           
                        }
                    }

                }
            },

And a fiddle link for details

For future continual work, make a button to trigger chart reload

Answer 2

create a chart after some event of a drop down from where you want to get color. something like <select id="idd" onChange="getColor()"> <option value="red">R</option> <option value="green">G</option> </select>
I have done a little bit here . will improve it soon.

Answer 3

Simply use point.update(options) , where in options you will set new hover color:

    chart.series[0].data[0].update({
        states: {
            hover: {
                color: "red"
            }    
        }
    });

Demo: http://jsfiddle.net/xoje27rt/