Change The Color Of Legend Symbol Highchart

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).

Solution 1:

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.

Solution 2:

Add color for the legend in each series.

series: [{color: '#000000',     //change heredata: [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 heredata: [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

Solution 3:

https://jsfiddle.net/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();
        	}
        }
    }
}