Use {point.color} for the different states


I have a stacked bar chart that uses different colours for each series (colours are pulled from the Basic > Appearance styles). In the Advanced > Column> States > Select > Color field, there’s only the option to add a specific colour and not use the existing colour from Appearance styles. If I specify a colour, the 2nd colour takes on the appearance of the first.

Our select style appearance is to only add a thick border around the bar, not to change the colour or the opacity. By default, it’s correct in the Hover state where it takes on the colour from the Basic > Appearance styles.

Is there a way to to have the Select state be the same colour as it is in Basic > Appearance styles?

Select state

Hover state

The only thing I can think of which will resolve your predicament is custom code, the reason for that being that advanced does not expose the pallette, and {point.color} is only defined for text.

Highcharts.merge(true, options, {
    plotOptions: {
        column: {
            allowPointSelect: true,
            cursor: 'pointer',
            states: {
                select: {
                    color: undefined, // Using the original color.
                    borderColor: 'black', // This can be changed to any desired border color.
                    borderWidth: 3

The big idea is that Highcharts won’t change the color if you don’t specify it. I’ve requested this be added to the new color picker we’re adding.

1 Like

Thank you for this Martin,

Using this code also allows me to set the cursor. I can’t seem to change the cursor to a pointer from the Advanced select options.

Internal reference: #1569