CODEWITHSUNDEEP
angulartypescripthighcharts
griffinleow
griffinleow

Reputation: 103

Highchart legend based on unique series/names

I can't seem to find anything relevant or useful on this. My specific use case is that the Series will be an array of objects in the following format:

{
   name: 'name_1',
   date: 'date_1',
   data: [[0, y-value]]
}

where the x-coordinate corresponds to a category in categories e.g:

categories = ['Jan', 'Feb', ...]

The problem with this approach is that there will be multiple series based on the number of 'name' of the objects. If there are 5 objects, it will be treated as 5 different series regardless of whether the names are identical or not. This means that in the legend, there will be 5 series as well.

However, in the case where there are identical series/names, I would like the legend to show only unique series/names. This is the jsFiddle that illustrates my pain point - https://jsfiddle.net/qn59dt2m/1/

Thanks in advance

Edit: Thanks to Sebastian for the solution! While it solved the issue of showing unique series/names, there was work to be done to fix the colors. That is, the colors of the series in the chart are different from those in the legend bar.

As such, what I did was to use colorIndex to group series by colors. Here is the jsFiddle - https://jsfiddle.net/ypve5qnc/5/

Upvotes: 1

Views: 774

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

You need to assign each series to the main series (this one which will be shown in the legend) by using the linkedTo feature. In your code this line must be removed because disturbs linkedTo working:

scatter: {
   showInLegend: true,
   ...
}

Demo: https://jsfiddle.net/BlackLabel/0wjutmbf/

API: https://api.highcharts.com/highcharts/series.line.linkedTo

Upvotes: 2

Related Questions