ingezone
Posts: 28
Joined: Mon Feb 01, 2021 3:16 am

How do I temporarily add a label when selecting columns.

Hi

The following example is working correctly, but now I need to add a label that shows the SUM of the selected columns.
That is, I must copy the same SUM: value that is shown in the tooltip.

Every time you deselect a bar, the SUM tag should show a lower value -sum.
Once you have deselected all the bars, the label will show SUM: 0, financially you must fade out and destroy the label.
If a bar is selected again, a new label will be displayed and the same previous destruction cycle is repeated.

Desired result with the new label:
Image

My example link: https://jsfiddle.net/ingezone/osebLw23/1/

I have done several tests but the selection of the bars is blocked. Please! your help.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How do I temporarily add a label when selecting columns.

Hello ingezone,

Thanks for contacting us with your question.

Just want to make sure if I understood correctly. You want to add a label showing sum of all selected bar values and depending on selecting / deselecting bars the label's value should be higher or lower or in case where no column is selected the label should disappear completely?

Thanks for clarification.
Best regards!
Mateusz Bernacik
Highcharts Developer
ingezone
Posts: 28
Joined: Mon Feb 01, 2021 3:16 am

Re: How do I temporarily add a label when selecting columns.

Hi mateusz

What you say is correct, I need that. Thanks for understanding.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How do I temporarily add a label when selecting columns.

Hi ingezone,

Here you can find working demo:
https://jsfiddle.net/BlackLabel/ey54u21v/

General idea is to check sum value of all selected points.

Let me know if you have any further questions.

Best regards!
Mateusz Bernacik
Highcharts Developer
ingezone
Posts: 28
Joined: Mon Feb 01, 2021 3:16 am

Re: How do I temporarily add a label when selecting columns.

Hi Mateusz

Your demo works fine when I select point by point, but it doesn't work correctly when I select multiple points per drag.
Also when I load the chart for the first time and select by dragging, the label shows zero value.

Image

I tried to make some changes but it did not work correctly by dragging. Please your help to solve it. :(
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How do I temporarily add a label when selecting columns.

Hello ingezone,

Here's a solution: https://jsfiddle.net/BlackLabel/bgqro37y/
Previous one didn't work in case of drag select because it triggers differnt event. Now when I added exactly the same logic for this specific event it works.

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
ingezone
Posts: 28
Joined: Mon Feb 01, 2021 3:16 am

Re: How do I temporarily add a label when selecting columns.

Hi Mateusz

Now your solution works 100%.

Thank you very much for everything.... :)
ingezone
Posts: 28
Joined: Mon Feb 01, 2021 3:16 am

Re: How do I temporarily add a label when selecting columns.

Hi

Finally, how should I use the same functions so that they work independently in each chart.

function selectPointsByDrag(e) {......}
function selectedPoints(e) {......}
function unselectByClick() {......}

Chart # 2 works correctly, however Chart # 1 does not delete the text after no data is selected.

https://jsfiddle.net/ingezone/xh1vgo4L/4/

Regards!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How do I temporarily add a label when selecting columns.

Hello ingezone,

These functions are not Highcharts native functions and frankly speaking debugging them is going beyond scope of my duty. My suggested solution is based on point state and is independent of these functions. If you want to hide that sum text when no points are selected then simply use destroy() method to get rid of that svg element. Whole logic is located in afterSetState event.
Demo: https://jsfiddle.net/BlackLabel/xkt1ozsd/

This solution is rather universal and there is no reason to not work with other charts. Try to implement that way but of course feel free to contact me again if it doesn't help.

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”