Updating candlestick data point using restyle in Plotly.js

Question

I am using a WebSocket connection to update a candlestick chart with live data.

Creating the initial candlestick chart is relatively easy:

var candleDiv = document.getElementById('candle-chart');
var data = {
    x: x, //Each of these is a single dimension array of the same length
    open: open,
    close: close,
    high: high,
    low: low,
    type: 'candlestick',
};
var layout = {
    datarevision: candleCount,
    dragmode: 'zoom',
    showlegend: false,
    xaxis: {
        type: 'date',
        range: [x[x.length - 26], x[x.length - 1]], //Only show the last 25 entries so it's not zoomed out too far.
        rangeslider: {
            visible: false
        },
        yaxis: {
            autorange: true,
        }
    }
}
data.xaxis = 'x';
data.yaxis = 'y';
data = [data];
Plotly.plot(candleDiv, data, layout);

However, the documentation for the restyle method doesn't talk much to the update of data. More about how the data is displayed. After much tinkering, I found a reasonable workaround of updating the data variable directly:

candleDiv.data[0].open[candleDiv.data[0].open.length - 1] = updatedOpenValue;
candleDiv.data[0].close[candleDiv.data[0].close.length - 1] = updatedCloseValue;
candleDiv.data[0].high[candleDiv.data[0].high.length - 1] = updatedHighValue;
candleDiv.data[0].low[candleDiv.data[0].low.length - 1] = updatedLowValue;
Plotly.restyle(candleDiv, 'data[0]', candleDiv.data[0], [0]);

This works, except that it appears to draw the new candle on the old candle. This becomes particularly distracting when the stick changes from a green (increasing) stick to a red (decreasing) stick.

Is there a correct syntax to achieve what I am attempting to do such that I don't get display issues?

I checked out this link from this post but I couldn't get the method used to work in the context of a candlestick chart.

nicolaskruchten · Answer 1 · 2018-05-06T01:28:40.580

0

You may want to look at the Plotly.react method instead of Plotly.restyle: https://plot.ly/javascript/plotlyjs-function-reference/#plotlyreact

edited May 06 '18 at 01:28

answered May 06 '18 at 01:15

nicolaskruchten

26,384
8
83
101

Like the function name suggests, I believe this only allows you to add datapoints, not update existing ones. – SimpleProgrammer May 06 '18 at 01:20
Ah in that case, might I recommend `Plotly.react`? – nicolaskruchten May 06 '18 at 01:21
`Plotly.react` seems to just be a combination of `restyle` and `relayout`. All of these methods suffer from the same issue. Or, at least when I try to use them. – SimpleProgrammer May 06 '18 at 01:27
`Plotly.react` allows you to specify the full contents of the plot you want and efficiently updates the existing plot. It works just like `Plotly.newPlot` except significantly faster on updates. The method that is a combo of `restyle` and `relayout` is `Plotly.update`. – nicolaskruchten May 06 '18 at 01:28
The only catch with using `Plotly.react` is that if you want to mutate data in-place you'll have to bump the `layout.datarevision` attribute on each call, as per the documentation. – nicolaskruchten May 06 '18 at 01:29

Updating candlestick data point using restyle in Plotly.js

1 Answers1