0
votes

I have defined custom color for data in series for highcharts column chart

data: [{y: 1234.5, color: '#234567'}, ...]

Sample code

var options = {
    chart: {
    type: 'column'
},
title: {
    text: 'Period'
},
xAxis: {
    categories: ['Cat 1', 'Cat 2'];
    })
},
yAxis: {
    min: 0,
    title: {
        text: null
    }
},
plotOptions: {
    column: {
        pointPadding: 0.2,
        borderWidth: 0
    }
},

series: [
  {
    name: 'Dog',
    data: [{y: 1, color: '#FF0000'}, {y: 1.45, color: '#FF0000'}]
  },
  {
    name: 'Cow',
    data: [{y: 2, color: '#CCCCCC'}, {y: 5.00, color: '#CCCCCC'}]
  },
  {
    name: 'Bird',
    data: [{y: 3, color: '#BBBBBB'}, {y: 3.45, color: '#BBBBBB'}]
  },
]

};

However for one column color in legend is different from corresponding column as shown in picture:

http://prntscr.com/6c2o25

I don't see it is possible to define custom color for xAxis > categories but only inside data entry.

Any ideas?

1
can you post some code apart from data array? - amit_183
I just added highcharts config object - Andrej Kaurin
Why do you set color on point level, not on series.level ? Like name: "dog", color: "red" ? - Paweł Fus

1 Answers

7
votes

You are setting your colors on the point level instead of the series level.

This leaves the series colors as the Highcharts default colors despite your column being the color you wanted.

The series color is what determines the legend icon color.

So this:

name: 'Dog',
data: [{y: 1, color: '#FF0000'}, {y: 1.45, color: '#FF0000'}]

Should be:

name: 'Dog',
color: '#f00',
data: [1,1.45]

Updated fiddle with colors set at the series level: