title: Updating candlestick data point using restyle in Plotly.js
body: <p>I am using a WebSocket connection to update a candlestick chart with live data.</p>
  
  <p>Creating the initial candlestick chart is relatively easy:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>However, the documentation for the <a href="https://plot.ly/javascript/plotlyjs-function-reference/#plotlyrestyle" rel="nofollow noreferrer">restyle</a> 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:</p>
  
  <pre><code>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]);
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/ZHQU5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZHQU5.png" alt="Candlestick graph display issue"></a></p>
  
  <p>Is there a correct syntax to achieve what I am attempting to do such that I don't get display issues?</p>
  
  <p>I checked out <a href="https://community.plot.ly/t/what-is-the-most-performant-way-to-update-a-graph-with-new-data/639" rel="nofollow noreferrer">this link</a> from <a href="https://stackoverflow.com/questions/32116368/plotly-update-data">this post</a> but I couldn't get the method used to work in the context of a candlestick chart. </p>