Is it possible to change the legend symbol color in Highcharts? For example demo example contains two series and the symbols in legend are in blue and black (same as the series).

I couldn't find any symbolColor param in the documentation. How do I change them both to say black?

legend: {
    layout: 'vertical',
    floating: true,
    align: 'left',
    verticalAlign: 'top',
    x: 90,
    y: 45,
    symbolPadding: 20,
    symbolWidth: 50,
    symbolColor: '#000000' ?????
},

Is it possible to change the legend symbol color in Highcharts? For example demo example contains two series and the symbols in legend are in blue and black (same as the series).

I couldn't find any symbolColor param in the documentation. How do I change them both to say black?

legend: {
    layout: 'vertical',
    floating: true,
    align: 'left',
    verticalAlign: 'top',
    x: 90,
    y: 45,
    symbolPadding: 20,
    symbolWidth: 50,
    symbolColor: '#000000' ?????
},

• javascript
• jquery
• highcharts
• legend

• Having colour of the legend different to that of series doesn't make sense to me. Legend is used depict what each series is, and in Highcharts, can also be used to show/hide series. May I ask why you need the legend to be of different colour than the series? – Rahul Sharma Commented Mar 20, 2016 at 17:30

3 Answers 3

The Highcharts 4.X source does look for a legendColor parameter for a series/point, however you can't (as far as I know) set it without it being a user option.

If you wrap the colorizeItem function of the Legend class you can set the legendColor attribute, and then utilize it quite easily. For example, wrap:

(function (H) {
    H.wrap(H.Legend.prototype, 'colorizeItem', function (proceed, item, visible) {
        item.legendColor = item.options.legendColor;
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    });
}(Highcharts));

And usage in your chart options:

$('#container').highcharts({
    series: [{
        legendColor: 'black',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

See this JSFiddle demonstration of how it looks.

Add color for the legend in each series.

series: [{color: '#000000',     //change here
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {color: '#000000',                   //change here
            data: [95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]
        }]

JSFiddle

https://jsfiddle/bym59w2p/

The colors of the legend items are updated when the series color gets an update. However, the legend will not change until clicked upon. When adding this bit of code:

this.chart.addSeries({
    showInLegend: false
  });
  this.chart.redraw();
}

You are adding an empty data serie, which is not visible in the legend but does reset the legend area. Also by adding a duration to 1, you will not or hardly see the color change. Maybe this helps you or anyone else trying to find this answer.

See below for the plotOptions bit, or click the jsfiddle link above to see it in action.

plotOptions: {
    series: {
        cursor: 'pointer',
        stacking: 'normal',
        animation: {
        	duration: 1
        },
        events: {
          "afterAnimate": function () {
            var colorsArr = ['red','yellow','green'];
            var nameArr = ['test','test2','test3'];
            var countI;
            for(countI=0;countI<this.data.length;countI++){
              switch(this.name){
                case nameArr[0]:
                  this.color = colorsArr[0];
                  this.data[countI].color = colorsArr[0];
                  break;
                case nameArr[1]:
                  this.color = colorsArr[1];
                  this.data[countI].color = colorsArr[1];
                  break;
                case nameArr[2]:
                  this.color = colorsArr[2];
                  this.data[countI].color = colorsArr[2];
                  break;
              }
            }  
            this.chart.addSeries({
            	showInLegend: false
            });
            this.chart.redraw();
        	}
        }
    }
}