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:

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

Any ideas?

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./6c2o25

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

Any ideas?

• javascript
• highcharts

• can you post some code apart from data array? – amit_183 Commented Mar 3, 2015 at 6:15
• I just added highcharts config object – Andrej Kaurin Commented Mar 3, 2015 at 6:43
• 1 Why do you set color on point level, not on series.level ? Like name: "dog", color: "red" ? – Paweł Fus Commented Mar 3, 2015 at 10:51

1 Answer 1

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:

• http://jsfiddle/jlbriggs/8xo2jayg/