javascript - Highcharts - column color different from color in legend - Stack Overflow

admin管理员组

文章数量:1360156

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

Share Improve this question Follow edited Mar 3, 2015 at 7:55 Andrej Kaurin asked Mar 3, 2015 at 6:03 Andrej KaurinAndrej Kaurin 11.6k1313 gold badges4747 silver badges5555 bronze badges 3

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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/

本文标签： javascriptHighchartscolumn color different from color in legendStack Overflow