gabegibler
Posts: 8
Joined: Thu Aug 19, 2021 1:18 am

Color of Legend Symbol in Gantt Chart

How can I change or set the color of the symbols for each series in the legend in a Gantt chart? This is for xrange series type.
Per the fiddle below, I can't seem to target it using any of the usual suspects. It's always grey. (I can, however, affect the hidden style.)

https://jsfiddle.net/gabegibler/6gqchr4o/
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Color of Legend Symbol in Gantt Chart

Hi,

Thank you for contacting us with your issue and for preparing the demo!

You can wrap the colorizeItem method and provide custom legendColor property:

Code: Select all

(function(H) {
    H.wrap(H.Legend.prototype, 'colorizeItem', function(proceed, item, visible) {
        var color = item.color;

        item.color = item.options.legendColor;
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        item.color = color;
    });
}(Highcharts));

Series options:

Code: Select all

series: [{
        ...,
        legendColor: 'red',
    }, ...
]

More about Extending Highcharts:
https://www.highcharts.com/docs/extendi ... highcharts

For changing text color use legend.itemStyle:

Code: Select all

    legend: {
        itemStyle: {
            color: 'blue',
            fontWeight: 'bold'
        }
    },

API Reference:
https://api.highcharts.com/highcharts/legend.itemStyle

Demo:
https://jsfiddle.net/BlackLabel/L0wtxz1u/

Feel free to ask any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
gabegibler
Posts: 8
Joined: Thu Aug 19, 2021 1:18 am

Re: Color of Legend Symbol in Gantt Chart

Excellent. Thank you!

A slight modification to make this work for Typescript (added explicit `this` in the anonymous function):

Code: Select all

(function(H) {
    H.wrap(H.Legend.prototype, 'colorizeItem', function(this, proceed, item, visible) {
        const color = item.color;

        item.color = item.options.legendColor;
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        item.color = color;
    });
}(Highcharts));
And placed it below where I initialize other additional Highcharts features (such as highchartsMore, highchartsNoData, etc).
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Color of Legend Symbol in Gantt Chart

I'm glad I could help! Thank you for sharing the modification.

In case of any further questions, feel free to contact us again,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Gantt”