'highchart set fill color

I have a highchart that I am using the select and unselect for a bar chart. I need to change the fiull color when the bar is selected and keep the current color. (I am only changing the border color)

It seem I can use the color property but specifying null there doesnt do the trick. Is there any way to do this without the API calls. (config options)

Here is what I am doint now

plotOptions: {
    series: {
        allowPointSelect: false,
        states: {
            select: {
                borderWidth: 1,
                borderColor: '#595E61'
                color: null
            }
        }
    }
}
highcharts


Solution 1:[1]

try this - it will (hopefully) highlight the selected item as yellow

plotOptions: {
    series: {
        allowPointSelect: true,
        marker: {
            states: {
                select: {
                    fillColor: 'yellow',
                    lineWidth: 0,
                    borderWidth: 1,
                    borderColor: '#595E61'
                }
            }
        }
    }
}

see this fiddle for an example of it in action (it's a line graph).

Solution 2:[2]

Actually it does the trick for me: http://www.highcharts.com/jsbin/edumap/2/edit

Could the problem be that you set allowPointSelect to false?

plotOptions: {
    column: {
        allowPointSelect: true,
        states: {
            select: {
                borderColor: 'red',
                color: null
            }
        }
    }
},

Solution 3:[3]

You need to set the color of the point in selected state. 

data:[{ color: '#00FF00', y: 20, states: {select: {color: '#00FF00'}} }, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

Here is a demo:

http://www.highcharts.com/jsbin/edumap/14/edit#javascript,live

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rachel Gallen
Solution 2 Torstein Hønsi
Solution 3 cubbuk

Related Questions