how to change bar hover color of highchart dynamic

问题:

I set bar hover color using below code:

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

But how can I change the bar hover color dynamically?

回答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

回答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.

回答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/