minhyen97
Posts: 30
Joined: Mon Apr 12, 2021 10:50 am
Location: PM

Edit the sticker when hovering over the candlestick

Hello,
I am creating a candlestick and volume chart:
Demo: https://jsfiddle.net/BlackLabel/bhj73yux/
Currently I want to edit the sticker when the user drags the mouse over any candle. And I want the sticker to look like the image below. But I have researched and read the documentation but cannot do it yet. Can someone help me.
Image:
customlabel.png
customlabel.png (48.08 KiB) Viewed 1358 times
Thank you very much.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Edit the sticker when hovering over the candlestick

Hello minhyen97!

We appreciate you reaching out to us!

To change the position of the tooltip you can use positioner function. To change the tooltip's content you can use formatter function. Regarding colors, there are plenty of properties such as borderColor, backgroundColor, etc. that can stylize the tooltip in a way you want to.

Demo:
https://jsfiddle.net/BlackLabel/90ovtyLz/

API references:
https://api.highcharts.com/highcharts/tooltip.formatter
https://api.highcharts.com/highcharts/t ... positioner
https://api.highcharts.com/highcharts/t ... orderWidth
https://api.highcharts.com/highcharts/t ... rderRadius
https://api.highcharts.com/highcharts/t ... orderColor
https://api.highcharts.com/highcharts/t ... roundColor
https://api.highcharts.com/highcharts/t ... tyle.color

Best regards!
Dominik Chudy
Highcharts Developer
minhyen97
Posts: 30
Joined: Mon Apr 12, 2021 10:50 am
Location: PM

Re: Edit the sticker when hovering over the candlestick

Thank you so much I've done it.
But there is a little problem that I just want to display the labels. As for the line leading to the candle I want to hide it. Can you help me. I have tried many ways but with no success.
lablecustom.png
lablecustom.png (30.16 KiB) Viewed 1351 times
Thanks for helping me so much.
Demo: https://jsfiddle.net/k39za6oy/4/
Hope you will respond soon.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Edit the sticker when hovering over the candlestick

Hi again!

To remove the connector line we can change the tooltip's shape to, e.g. rectangle - which does not have any connector.

API references:
https://api.highcharts.com/highcharts/tooltip.shape

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

Best regards!
Dominik Chudy
Highcharts Developer
minhyen97
Posts: 30
Joined: Mon Apr 12, 2021 10:50 am
Location: PM

Re: Edit the sticker when hovering over the candlestick

Thank you very much,
Currently I have added the SMA to the chart. But when hovering over the SMA, the error label is displayed. This error is similar when I hover over the volume candle. Is there any way to disable the hover function on the SMA and volume candles?
sma.png
sma.png (32.44 KiB) Viewed 1344 times
Looking forward to your feedback. Thank you very much for your help.
minhyen97
Posts: 30
Joined: Mon Apr 12, 2021 10:50 am
Location: PM

Re: Edit the sticker when hovering over the candlestick

Thank you very much,
Currently I have added the SMA to the chart. But when hovering over the SMA, the error label is displayed. This error is similar when I hover over the volume candle. Is there any way to disable the hover function on the SMA and volume candles?
Looking forward to your feedback. Thank you very much for your help.
sma.png
sma.png (32.44 KiB) Viewed 1342 times
Demo :https://jsfiddle.net/1cLbqv0j/1/
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Edit the sticker when hovering over the candlestick

Hi again!

One of the possible solutions would be to set enableMouseTracking property to false for the SMA and volume candle series. Check out the demo and tell me if it works fine for you. :)

API references:
https://api.highcharts.com/highcharts/s ... seTracking

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

Best regards!
Dominik Chudy
Highcharts Developer
minhyen97
Posts: 30
Joined: Mon Apr 12, 2021 10:50 am
Location: PM

Re: Edit the sticker when hovering over the candlestick


Hello again.

Can you help me show if the sticker contains the volume value.
I tried adding but it doesn't work.

Code: Select all

 return 'O: ' + this.point.open + ' C: ' + this.point.close + '<br />H: ' + this.point.high + ' L: ' + this.point.low + ' Vol: ' + this.point.volume
Demo : https://jsfiddle.net/6pbz7nL5/3/
Thank you very much. Hope you reply soon.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Edit the sticker when hovering over the candlestick

Hi again!

This value is not stored in the properties of the point we've hovered. To get this value we need to go through all points in the volume series and find the point with the same x coordinate. Then when we find the point we can display its value. In the demo below you can see how it can be done. :-)

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

Best regards!
Dominik Chudy
Highcharts Developer
minhyen97
Posts: 30
Joined: Mon Apr 12, 2021 10:50 am
Location: PM

Re: Edit the sticker when hovering over the candlestick

My program worked. Thank you very much!!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Edit the sticker when hovering over the candlestick

You're welcome!

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

Return to “Highcharts Stock”