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

Add label current time in stockchart real time

Hello,
I'm creating a candlestick and volume chart Real time:
Demo: https://jsfiddle.net/5389eutd/
Currently I want to add a label showing the current time like lastPrice. I have researched the documentation but have not found a solution.
An example label image:
imgchart
imgchart
imgchart.png (35.79 KiB) Viewed 410 times
Thanks in advance for any help.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Add label current time in stockchart real time

Hi,
Thanks for contacting us with your question!

I think the best solution will be to update extra labels every second in eventss like chart.events.redraw.
https://api.highcharts.com/highstock/ch ... nts.redraw

Let me know how are you going with this.
Best regards.
Sebastian Hajdus
Highcharts Developer
minhyen97
Posts: 30
Joined: Mon Apr 12, 2021 10:50 am
Location: PM

Re: Add label current time in stockchart real time

sebastian.h wrote: Mon Apr 26, 2021 8:15 am Hi,
Thanks for contacting us with your question!

I think the best solution will be to update extra labels every second in eventss like chart.events.redraw.
https://api.highcharts.com/highstock/ch ... nts.redraw

Let me know how are you going with this.
Best regards.
Before updating the extra-label every second. Can you help me create such a extra-label. I have been enthralled researching the documentation but have yet to find a solution to this problem, because I only recently got to know Highcharts.
Hope you will respond soon!
Thank you very much.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Add label current time in stockchart real time

Hi,
Sure, I prepared a demo for you wherein I use Highcharts.SVGRenderer to render extra label on yaxis.
https://api.highcharts.com/class-refere ... derer#text

Now, you need to find the same position as lastPrice, change currentTime to fit to your project and update every second.

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

Feel free to ask any questions.
Best regards.
Sebastian Hajdus
Highcharts Developer
minhyen97
Posts: 30
Joined: Mon Apr 12, 2021 10:50 am
Location: PM

Re: Add label current time in stockchart real time

Thank you very much. I have updated the current time for the label.
Demo code: https://jsfiddle.net/y3gxcaup/
But now I want to add a background for this label like lastPrice. I tried to add the background property but it still hasn't changed. You can help me. I will thank you very much.

Code: Select all

.css({
   color: 'black',
   fontSize: 11,
   fontWeight: 'bold',
   width:50,
   height:300,
   padding:5,
   backgroundColor: 'rgba(252, 255, 197, 0.7)',
   fill: '#FCFFC5',
})
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Add label current time in stockchart real time

Hi,
There is no option as background when you render text via SVG, you will need to draw a rectangle and hide then under the text.

API References:
https://api.highcharts.com/class-refere ... Attributes
https://api.highcharts.com/class-refere ... derer#rect
https://jsfiddle.net/gh/get/library/pur ... erer-rect/

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

Best regards.
Sebastian Hajdus
Highcharts Developer
minhyen97
Posts: 30
Joined: Mon Apr 12, 2021 10:50 am
Location: PM

Re: Add label current time in stockchart real time

Thank you so much!.
The program I was running.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Add label current time in stockchart real time

You're welcome!
In case of any further questions, feel free to contact us again.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Stock”