Chart flickering on data update when using react.

[frbju]

Chart flickering when data updates. Looks like yExtent resets each time it gets new data.

code:

import React, { useEffect, useState, useRef } from 'react';
import { NightVision } from 'night-vision'

let chart;
const StockChart = (props) => {

    useEffect(() => {
        chart = new NightVision('stockchart', {
            autoResize: true,
        })
    }, [])

    useEffect(() => {
        if (props.data.length > 0) {
            chart.data = {
                panes: [
                    {
                        overlays: [
                            {
                                name: "APE / Tether US",
                                type: "Candles",
                                main: true,
                                data: props.data.reverse()
                            }]
                    }
                ],
            }
        }
    }, [props.data])
    return (
        <>
            <div id="stockchart"></div>
        </>
    );
}

export default StockChart;

[C451]

You made the data set reactive, but the lib was built to avoid that. You need to use partial updates https://nightvision.dev/guide/api/chart-api.html#chart-update-type-opt

The flickering is caused by a delay in calculation yRange indeed. (should be fixed of course)

[frbju]

thanks for this. Do you have an example on how to use chart.update('data') ? Tried lots of things but non actually updates the data.

[C451]

Yes, when I add new chunk of data here, I call update('data') https://codesandbox.io/s/playing-around-10-0zh0jh?from-embed=&file=/main.js

[frbju]

Thank you, Funny thing also noticed, While moving the cursor, Chart stops flickering + updates data with react :) So as long as you're active the flickering is gone.