Highcharts - Gray out only title in legend

Viewed 347

Is it possible to gray out only title of hidden serie in highcharts legend (not the color marker)? Picture worth 1000 words.

Default behavior What I want

2 Answers

As an alternative, a wrapping of Legend.colorizeItem which post-processes the legend items legendLine and legendSymbol to "undo" the setting of the hidden color:

(function (H) {
    H.wrap(H.Legend.prototype, 'colorizeItem', function (proceed, item, visible) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        if(item.legendLine) {
            item.legendLine.attr({ stroke: item.color });
        }
        if(item.legendSymbol) {
            if ((item.options && item.options.marker) && item.legendSymbol.isMarker)
                item.legendSymbol.attr(item.pointAttribs());
            else
                item.legendSymbol.attr({ fill: item.color });
        }
    });
}(Highcharts));

The elaborate code for item.LegendSymbol is to preserve any marker options that may be set. It mimics the default behavior of colorizeItem without considering visibles truthness.

See this JSFiddle demonstration of it in use.

You could apply CSS to style the legend to achieve your desired effect.

Specifically, take advantage of the highcharts-legend-item-hidden class that gets added on each legend item (i.e. after it gets clicked on to hide the series) to force the colour of the marker to stay the same colour.

For example, to ensure the legend marker of the first data series always stays as #ff6600:

.highcharts-series-0.highcharts-legend-item-hidden .highcharts-graph {
    stroke: #ff6600;
}
.highcharts-series-0.highcharts-legend-item-hidden .highcharts-point {
    fill: #ff6600;
}

Here's a demonstration.

Related