sreeharsha27
Posts: 50
Joined: Tue Dec 03, 2019 5:14 am

Use legends to switch data on line charts

Hello,

I appreciate your help in advance

I have a question and the demo is available at: https://jsfiddle.net/sreeharsha27/Lfbth9wk/15/

question:

Want to have the legend labels at the top right of the chart.

By default, only the Rev and Rev Pen should be enabled and the other 2 should be disabled


Please help, thank you !
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Use legends to switch data on line charts

Hello sreeharsha27!

We appreciate you reaching out to us!

The legend was not positioned properly because the y property was set to 1000 which was beyond the chart plot. If you want to make 2 series disabled you can hide them in the load event. If you don't want to show them in the legend at all you can set showInLegend property to false for each of them.

API references:
https://api.highcharts.com/class-refere ... eries#hide
https://api.highcharts.com/highcharts/s ... owInLegend
https://api.highcharts.com/highcharts/chart.events.load


Demo:
https://jsfiddle.net/BlackLabel/8ekzg4ju/ <- hide series
https://jsfiddle.net/BlackLabel/j07necwo/ <- remove series from legend

Best regards!
Dominik Chudy
Highcharts Developer
sreeharsha27
Posts: 50
Joined: Tue Dec 03, 2019 5:14 am

Re: Use legends to switch data on line charts

Thanks Dominik, you have always been very helpful

This is what I did ultimately to achieve this :)

https://jsfiddle.net/sreeharsha27/Lfbth9wk/24/

Just used visible: false in the series

Thank you !
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Use legends to switch data on line charts

Hi again!

Thanks, that's very nice. :)

In case of any further questions, feel free to contact us again.
Dominik Chudy
Highcharts Developer
sreeharsha27
Posts: 50
Joined: Tue Dec 03, 2019 5:14 am

Re: Use legends to switch data on line charts

Well, I got one more .. :)

If I need to have some kind of a toggle or a drop down or a radio button with this chart (Placed at the top of the graph on the right), is it possible?

there will be 2 options for it: Rev and RN where Rev is selected by default

The graph will display Rev Pen and Rev metrics when Rev is chosen
The graph will display RN Pen and RN metrics when RN is chosen

You can still use the demo: https://jsfiddle.net/sreeharsha27/Lfbth9wk/24/

Thanks in advance, appreciate all your help
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Use legends to switch data on line charts

Hi again!

Of course, it's possible! :)

I've prepared a simple POC for you. Check it out and tell me what do you think about it.

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

Best regards!
Dominik Chudy
Highcharts Developer
sreeharsha27
Posts: 50
Joined: Tue Dec 03, 2019 5:14 am

Re: Use legends to switch data on line charts

Thank you so much Dominik, appreciate that.

I should be able to use this
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Use legends to switch data on line charts

That's great to hear!

In case of any further questions, feel free to contact us again.
Dominik Chudy
Highcharts Developer

Return to “Highcharts Usage”