HagarWahsh
Posts: 3
Joined: Tue May 04, 2021 12:24 pm

Select multiple series line form chart

Hi there,

I want to check if there is an option that I can select multiple lines from the graph by dragging the mouse over them.

For example, I have a graph with multiple series, and there are some series that are above a certain threshold.
I want to select those lines using the mouse (right-click and drag over them), is that possible?

I already have implemented a one-line select using the point -> events -> click, but I couldn't select multiple lines.

Thanks,
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Select multiple series line form chart

Hello HagarWahsh!

Welcome to our forum and thanks for contacting us with your question!

I'm not sure if I understand you correctly. Do you want to click on the series and make it selected? How should it look like? The series should change its color? What should happen after selecting the series? Could you precise it, please? :-)

I've prepared a simple demo with multiple series according to your description.

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

Best regards!
Dominik Chudy
Highcharts Developer
HagarWahsh
Posts: 3
Joined: Tue May 04, 2021 12:24 pm

Re: Select multiple series lines from chart

Hello dominik.c,

Thank you for your fast reply.

I will try to illustrate more on the demo you've prepared :)

For example, the green and orange lines are above 80 (we will assume that 80 is our threshold here),
we want to select those lines and delete them permanently from the graph, but I don't want to select each one of them alone, I want the selection to be grouped.

I will attach an image to give you a glance at what I want.
Graph.png
Graph.png (117.87 KiB) Viewed 2386 times
After the selection made, I will handle it to delete them from the graph which is not a problem for me now as I've made it before.
All I want to be able to select multiple lines at once :D

Thanks for your time,
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Select multiple series line form chart

Hi again!

In the click event of a series, we can write a code that will go through all data in our chart and if a point of a series will be beyond our threshold we will add the series to an array and then removed all of them at once. Does it work for you? :)

Demo:
https://jsfiddle.net/BlackLabel/2x1q39g0/

API references:
https://api.highcharts.com/highcharts/p ... ents.click
https://api.highcharts.com/class-refere ... ies#remove

Best regards!
Dominik Chudy
Highcharts Developer
HagarWahsh
Posts: 3
Joined: Tue May 04, 2021 12:24 pm

Re: Select multiple series line form chart

I guess that might work instead of mouse selection :D

Thanks dominik.c for your time and effort, have a great day.

Best regards!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Select multiple series line form chart

You're welcome, have a great day! :)

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

Return to “Highcharts Usage”