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

Update line lastPrice on chart Real Time

Hello,
I'm creating a candlestick and volume chart Real time:
https://jsfiddle.net/6syf2x93/
Currently I want to display the lastPrice lable on a straight line like in this example but it can't. Can someone guide me to do this.
Thank you!
Example here: https://jsfiddle.net/y9Lhv7ef/6/
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Update line lastPrice on chart Real Time

Hello minhyen97!

We appreciate you reaching out to us!

You need to import price-indicator module and then use the piece of code that is already in your example (lastPrice, lastVisiblePrice).

API references:
https://api.highcharts.com/highstock/se ... .lastPrice

Demo:

https://jsfiddle.net/BlackLabel/q5rf63go/

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

Re: Update line lastPrice on chart Real Time

Thank you very much Dominik.c !
But now the label has covered the last few candles on the chart. Do you have a way to move the labels to the right outside the diagram! If possible, I would like to thank you for your help.
Demo : https://jsfiddle.net/BlackLabel/q5rf63go/
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Update line lastPrice on chart Real Time

Hi again!

I'm afraid there's no API option to do that, but you can try to move axis labels outside the chart.

API references:
https://api.highcharts.com/highstock/yAxis.labels.x

Demo:
https://jsfiddle.net/BlackLabel/5j6d781y/

If it doesn't meet your expectations you can also write a wrap. Here you've got some info about it:
https://www.highcharts.com/docs/extendi ... highcharts

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

Re: Update line lastPrice on chart Real Time

Thank you Dominik.c again!
Can you help me with this very small problem again. I know this is annoying for you but I have been trying to find out the documentation for now but have not solved this problem yet.
1. The problem is I want to add a label like lastVisiblePrice and it's below the lastVisiblePrice label. For now, I want to simultaneously display the lastVisiblePrice with the current time on this chart.
2.The lastVisiblePrice label currently hides the last few candles on the chart. Do you have a way to move the labels to the outside right of the chart!
I tried it but to no avail :

Code: Select all

 lastVisiblePrice: {
        enabled: true,
        label: {
          enabled: true,
          align: 'right',
          x: 50
        }
      }
Thank you for your help!
Demo : https://jsfiddle.net/102zmagp/4/
minhyen97
Posts: 30
Joined: Mon Apr 12, 2021 10:50 am
Location: PM

Re: Update line lastPrice on chart Real Time

minhyen97 wrote: Thu Apr 15, 2021 11:37 am Thank you Dominik.c again!
Can you help me with this very small problem again. I know this is annoying for you but I have been trying to find out the documentation for now but have not solved this problem yet.
1. The problem is I want to add a label like lastVisiblePrice and it's below the lastVisiblePrice label. For now, I want to simultaneously display the lastVisiblePrice with the current time on this chart.
2.The lastVisiblePrice label currently hides the last few candles on the chart. Do you have a way to move the labels to the outside right of the chart!
I tried it but to no avail :

Code: Select all

 lastVisiblePrice: {
        enabled: true,
        label: {
          enabled: true,
          align: 'right',
          x: 50
        }
      }
Thank you for your help!
Demo : https://jsfiddle.net/102zmagp/4/
image chart
image chart
imagchart.PNG (17.76 KiB) Viewed 1540 times
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Update line lastPrice on chart Real Time

Hi again!

As I said there's no API option to move lastVisiblePrice label outside the chart, but we can try to change the axis width, so there will be a place for the lastVisiblePirce label and it will not cover the last candles.

API references:

https://api.highcharts.com/highstock/xAxis.width

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

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

Re: Update line lastPrice on chart Real Time

Thank you so much!.
The program I was running.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Update line lastPrice on chart Real Time

You're welcome!

In case of any further questions, feel free to contact us again.
Dominik Chudy
Highcharts Developer
karath99
Posts: 3
Joined: Wed Nov 02, 2022 12:00 pm

Re: Update line lastPrice on chart Real Time

dominik.c wrote: Fri Apr 16, 2021 7:37 am Hi again!

As I said there's no API option to move lastVisiblePrice label outside the chart, but we can try to change the axis width, so there will be a place for the lastVisiblePirce label and it will not cover the last candles.

API references:

https://api.highcharts.com/highstock/xAxis.width

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

Best regards!
Hello dominik.c,
I've faced similar issue to position lastVisiblePrice to right (same with price label row). Hence, please allow me reply on this thread.
My current versions and stack:
- NextJs: 13.0.0
- highcharts: 10.2.1
- highcharts-react-official: 3.1.0

I've tried setup as you suggested

Code: Select all

      lastVisiblePrice: {
        enabled: true,
        label: {
          enabled: true,
          align: 'right',
          x: 50
        }
      },
But from highcharts-react-official i cannot see it has option `x` instead it provide `style` option. So i tried as below but it still cannot works

Code: Select all

  lastVisiblePrice: {
    enabled: true,
    label: {
      enabled: true,
      align: "right",
      formatter: function (this, yValue) {
        const today = new Date();
        const year = today.getUTCFullYear();
        const month = today.getUTCMonth();
        const date = today.getUTCDate();
        const hours = today.getUTCHours();
        const minutes = today.getUTCMinutes();
        const seconds = today.getUTCSeconds();
        return `${yValue}
                ${hours}:${minutes}:${seconds}
                ${year}/${month}/${date}`;
      },
      style: {
        width: 100,
        position: "absolute",
        right: "-100px",
      },
    },
  },
Could you give me an advise. Many thanks
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Update line lastPrice on chart Real Time

Hello there!

Welcome to our forum, and thank you for contacting us.

Would you mind sharing a React demo with your actual code for the lastPriceLine? You can use the Stackblitz or Codesandbox for it.
It would be much easier to work on a solution for you on a real piece of code.

Thank you in advance,
Regards!
Kamil Musiałowski
Highcharts Developer
karath99
Posts: 3
Joined: Wed Nov 02, 2022 12:00 pm

Re: Update line lastPrice on chart Real Time

Hello Kamil.m,
This is my code https://codesandbox.io/s/highcharts-rea ... =/demo.jsx
From this code I also faced some issues as listed below

Firstly my purpose is create a realtime price smooth update with last candle and a text allow multiple line and can set background color on the right both should realtime update smooth (animate) with last candle. So i found can use lastVisiblePrice label for right text and lastPrice for line price but they are not works as expected and several minor problems.

1. How to position lastVisiblePrice label to right (same position with price label row), current they are overlap on some last candles.? I've tried with style options but it not works.
2. How to custom style of lastPrice line such as: dashed instead of solid line?
3. How to make lastPrice line and lastVisiblePrice label moving smooth as last candle? (hide lastVisiblePrice label to see lastPrice line is moving faster than candle update).
4. I have two SMA indicator line but it is not draw on the first candle of chart, how to make it draw from first candle to last candle?

Many thanks.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Update line lastPrice on chart Real Time

Hi there,

Sorry for the late reply, but your issue took more time to resolve than expected.

I have removed the lastPrice from your config, the lastVisiblePrice with the color set to red is sufficient.

1. To position the label to the right, you can use the translate method (which is available on every SVG Element in Highcharts).
I have calculated the position of the yAxis labels group and moved the lastVisiblePrice label there.
Demo: https://codesandbox.io/s/highcharts-rea ... ked-h8thpe

You can set the lastVisiblePrice.dashStyle for example to "dash". Take a look at the demo and possible dash options.
Demo: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx
Dash styles: https://jsfiddle.net/BlackLabel/sfq8nhtc/

3. It is not available in the API at this moment, but this functionality sounds like a great feature request to do! Feel free to make a GitHub ticket for it.
GitHub: https://github.com/highcharts/highchart ... new/choose

4. What you can observe is the correct behavior of the moving average. The period of MA also determines its starting point. For example, if you choose to have a MA of 9 period, then on candles 1-8 it doesn't know what data it should plot, since it can't calculate the 9 period due to a lack of data points.
You can't mathematically change it, but you can do a visual trick, where you would set the xAxis.min to a higher value (not the data start).
Take a look at tradingview.com, choose a random chart, and scroll back to the left, and you will see that the moving averages do not start from the first data point.

In case of any other questions, please do not hesitate to ask,
Best regards!
Kamil Musiałowski
Highcharts Developer
karath99
Posts: 3
Joined: Wed Nov 02, 2022 12:00 pm

Re: Update line lastPrice on chart Real Time

Hi Kamil.m,
Thank you so much for your response and your time. For the item 4, I've tried add xAxis.min to 10 but the volume axis is not show the tick label, maybe I'm understand well the meaning of xAxis.min property. could you tweak the demo code to make two SMA with params 3 and params 10 draw from the first candle?

Thank you.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Update line lastPrice on chart Real Time

Sure thing!

I have created a little logic, that takes the 11th point from your data, and sets the xAxis.min to that point. That way it will start from the first candle on which the 10 period SMA is plotted.

Demo: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

Let me know once you'll need anything else,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”