NeBox
Posts: 67
Joined: Sun Feb 05, 2023 4:12 am

Add new Point on a Chart

Hi, team.

I don't understand how I can add a new bar to a chart, without reloading it.
I'm using addPoint, but it added it on top of previous bar.
Is there any way to automatically add a bar by shifting them one forward?

Example
Click "Add Point"
https://jsfiddle.net/NeBox/xyjp8rwb/42/

What am I doing wrong?

Thanks !)
andrzej.b
Posts: 232
Joined: Mon Jul 15, 2024 12:34 pm

Re: Add new Point on a Chart

Hi,

Thanks for contacting us with your question!

In your add point function, you assign to your new point the same time stamp - x value - as the last one, hence overlap occurs.
Assuming that the interval is one minute, you can modify your function in the following way:

Code: Select all

function addPoint() {
    const series = chart_obj.series[0];
    let last = series.points[series.points.length - 1];
    let new_x = last['x'] + 60 * 1000;
    let update_data = {
        x: new_x,
        open: last['open'] + Math.floor(Math.random() * 2 - 1),
        high: last['high'] + Math.floor(Math.random() * 2 - 1),
        low: last['low'] + Math.floor(Math.random() * 2 - 1),
        close: last['close'] + Math.floor(Math.random() * 2 - 1)
    };
    const shift = series.data.length > (6 * 60 * 24);

    series.addPoint(update_data, true, shift);
    chart_obj.redraw();
}
Please see your code with the change implemented: https://jsfiddle.net/BlackLabel/m8o7hLw0/

I hope you will find it useful.

Best regards,
Andrzej
Highcharts Developer
NeBox
Posts: 67
Joined: Sun Feb 05, 2023 4:12 am

Re: Add new Point on a Chart

Hi.

Thanks for your help. The solution helped to find a possible problem.

I have added code

Code: Select all

    navigator: {
       enabled: false
    }
Here is an example https://jsfiddle.net/NeBox/qfj4nczr/2/

If I enable navigator, adding a bar works very badly. There is no animation of adding.

I don't need navigator, so I turned it off.
jedrzej.r
Site Moderator
Posts: 760
Joined: Tue Jan 24, 2023 11:21 am

Re: Add new Point on a Chart

Hi again,

I've tested your code on my side and it seems that the addPoint implementation is false, since you're setting the redraw parameter to true, and then you're calling chart.redraw() method which might have an impact on chart performance.

Below is a simplified demo with adding and shifting point functionaility, which should work regardless of the navigator appearance.

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

Kind regards,
Jędrzej Ruta
Highcharts Developer
NeBox
Posts: 67
Joined: Sun Feb 05, 2023 4:12 am

Re: Add new Point on a Chart

Thank you for reply.

I've changed code to your example, but it doesn't solve the problem

Here is an example https://jsfiddle.net/NeBox/qfj4nczr/5/
Try adding the bars a few times. They work a couple of times, then they stop being added and overlap each other

That demo shows the sample code I'm testing.
You have lastprice turned off and no other settings in your code.

I add two bars, the rest are not added normally.
jedrzej.r
Site Moderator
Posts: 760
Joined: Tue Jan 24, 2023 11:21 am

Re: Add new Point on a Chart

After investigating your solution, it seems that the x-axis extremes set on the initial load of the chart are blocking the points from being visible. If you update the x-axis extremes after adding point, it should work correctly.

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

Kind regards,
Jędrzej Ruta
Highcharts Developer
NeBox
Posts: 67
Joined: Sun Feb 05, 2023 4:12 am

Re: Add new Point on a Chart

Thanks for help, everything seems to be working.

Return to “Highcharts Stock”