grouping Syncfusion line chart series in the legend

Question

I've made a line chart with several series showing yearly data. The chart is very rich so I need to highlight only the most important information to the user. The most important are the current year data and average. All the other series, past years, should stay in the background with a neutral colour.

Here is what I've got for now:

As you can see the past year series, in grey, have been hidden in the legend in order to not have a very long list of years (since 1980).

What I'd like to do is to show past years series grouped as a single item, i.e. named "1980-2016", in the legend. Is there a way or a workaround to achieve this result with this chart widget?

here is the code: http://jsplayground.syncfusion.com/4b2qkqkr

saravana kumar saravana kumar · Accepted Answer · 2017-10-05T09:27:30

We have analyzed this and modified the sample based on your requirement.

Please refer the code example below

$("#container").ejChart({ legendItemRendering:"onLegendItemRendering" });function onLegendItemRendering(sender){
   if (sender.data.legendItem.SeriesIndex == 0)
   {
     sender.data.legendItem.Text = ' "' + startDate + " - " + endDate + '" '; 
   }
}

In the above code, we are triggering legendItemRendeing event. In the event, we are modifying the legend text based on your requirement.

Kindly find the sample link from the below.

Sample link: http://jsplayground.syncfusion.com/cm5aa3mc

Please find the output of the sample from the below link

https://i.stack.imgur.com/i8DLe.png

Please let us know if you have any concern.

Regards, Saravana Kumar K.

grouping Syncfusion line chart series in the legend

1 Answers