Victory charts doesnt update when data changes in React

Question

I'm using victory chart to display data from api. When i search a date through search date component , I noticed when the data changed, the chart didnt re-rendering. Here is the code:

 return (
<>
  <Container className="global-container">        
    <SearchDate sendData={(d)=>{
      setArr(d);
    }} />
    <Card automatedTestId="global-data-container">
        <>
          <Word
            textStyle="title"
            automatedTestId="global-pr-name"
            variant="h1"
            value="Pompe 1"
          />
          <StepShow dataNombre={arr} />
        </> 
    </Card>
  </Container>
</>

);

StepShow is my victory line custom component. I wrapped it with victoryChart tag like this:

<VictoryChart> <VictoryLine data={props.dataTemps}/> </VictoryChart>

After debugging, I can confirm that the data is changed as a result of an event, but these changes are not actually reflected in the chart. Any solutions please?

Answer 1

I had same problem with Victory area chart. Whenever my data state changes I need to update chart. So I made variable chart in useEffect:

useEffect(()=>{
const chart = <VictoryChart>...</VictoryChart>

ReactDOM.render(victoryChart, document.getElementById('chartId'));

},[])

Then, in some change data method (onClick, onChange, onMousedown etc.) put:

const chart = <VictoryChart>...</VictoryChart> //again declare variable for chart

ReactDOM.unmountComponentAtNode(document.getElementById('chartId')); //delete old
ReactDOM.render(victoryChart,document.getElementById('chartId')); //set new

In return make empty div :

return (
<div id="chartId"></div>

)