micronyks
Posts: 13
Joined: Wed Jun 08, 2022 7:23 am

Update current value on mousemove for all lines & Tooltip formatting in stock highcharts

I literally tried achieving below items but failed after putting lots of efforts and reaching out for the solution.

In stock highcharts, when mouse is moved, I want to update the current value field of datagrid for both the lines. Unfortunately, it is updating for signal line when mouse is hovered over a particular line as you can see here:

DEMO : https://stackblitz.com/edit/react-ts-7d ... ckchart.js

I kind of know it is because I'm attaching mouseOver callback to point property of plotOptions as shown below,

Code: Select all

plotOptions: {
        series: {
          ...,   
          ...,
          point: {
            events: {
              mouseOver: (e) => {
                const temp = [...stockGrid];
                const stock = temp.find((x) => x.name === e.target.series.name);
                if (stock) {
                  stock.currentValue = e.target.options.y;
                  setStockGrid(temp);
                }
              },
            },
          },
        },
      },



I tried attaching mouseOver event to series field also but I don't know how to extract the right required value with it.

I want to update both lines' current value simultaneously when mouse is moving anywhere in the chart.


2) If you look at the tooltip, I want to get rid of the outer rectangle from all tooltips.


3) In tooltip, as you can see currency is not getting displayed even when I try to read the value from

Code: Select all

Value:{point.y}, Currency: {series.currency}
as you can see I try to set currency as below,

Code: Select all

seriesOptions[i] = {
        name: sd.name,
        data: sd.datapoints,
        currency: stockData.find((x) => x.name === sd.name).currency,
      };
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Update current value on mousemove for all lines & Tooltip formatting in stock highcharts

Hello,

Thank you for contacting us with your question.

1) If you need to display the data from multiple series/charts this demo might be useful for you: https://www.highcharts.com/demo/synchronized-charts

2) To get rid of the outer border in your tooltip, set the tooltip.borderWidth to 0.

3) You can't access the currency property on series, because once you set it in line 42, then you delete it by overwriting the seriesOptions in line 127. If you add the currency property there, you can access it in pointFormat by using {series.userOptions.currency}.

Let me know if that was what you were looking for!
Best regards
Kamil Musiałowski
Highcharts Developer
micronyks
Posts: 13
Joined: Wed Jun 08, 2022 7:23 am

Re: Update current value on mousemove for all lines & Tooltip formatting in stock highcharts

@kamil.m, Thanks for reaching out with your reply.

It has helped me to resolve third point completely. Now, I'm able to access currency field without any problem.

However, for 1st point, I really need community's help and for 2nd point, setting tooltip.borderWidth to 0 removes the outer rectangle but at a same time, it removes the line between vertical line and tooltip. It looks like tooltip is flying in the air. I need a line between vertical line and tooltip or in other words a line from given point to tooltip.

I updated the demo which resolved third point. It would really be nice if you can help me resolve first 2 points.

https://stackblitz.com/edit/react-ts-7d ... ckchart.js
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Update current value on mousemove for all lines & Tooltip formatting in stock highcharts

Hi there,

I'm guessing that you want to remove the tooltip.padding. Please set this option to 0, and check if that's what you were looking for.

I have also changed your mouseOver logic, so now it should work as intended.
DEMO: https://stackblitz.com/edit/react-ts-kf ... ckchart.js

​If you have further inquiries, you may reach out to us at any time,
Best regards!
Kamil Musiałowski
Highcharts Developer
micronyks
Posts: 13
Joined: Wed Jun 08, 2022 7:23 am

Re: Update current value on mousemove for all lines & Tooltip formatting in stock highcharts

@Kamil Musiałowski

Thank you so so much for helping me out.

Yes that is exactly what I was looking for.

Thanks once again and have a great day !
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Update current value on mousemove for all lines & Tooltip formatting in stock highcharts

Thank you! I'm really glad that you are happy with the solution,

Have a great day!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”