Prevent Chart re-rendering?
See original GitHub issueAny state changes in the app makes the chart re-rendering its points. I noticed this at the faq:
This is because to track changes in the dataset series, the library needs a key to be specified - if none is found, it can’t tell the difference between the datasets while updating. To get around this issue, you can take these two approaches: Add a label property on each dataset. By default, this library uses the label property as the key to distinguish datasets. Specify a different property to be used as a key by passing a datasetKeyProvider prop to your chart component, which would return a unique string value for each dataset.
Do we have any examples on how to do that? I work with Chart Js for time series and i will load lots of points with multiple datasets, so rerendering on state change will be expensive. I’d prefer to call update() if possible.
This is my sample datasets
data: ChartData = {
datasets: [
{
label: "Line 1",
data: [
{
x: subDays(new Date(), 4).getTime(),
y: 20
},
{
x: subDays(new Date(), 1).getTime(),
y: 19
}
],
borderColor: 'rgba(255, 99, 132, 0.2)',
},
{
label: "Line 2",
data: [
{
x: subDays(new Date(), 3).getTime(),
y: 17
},
{
x: subDays(new Date(), 2).getTime(),
y: 20
}
],
borderColor: 'rgba(143, 99, 132, 0.2)',
},
]
}
I have label on each dataset and the rerender is still happening. How do i prevent the rerender? Thanks in advance.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:4
- Comments:7
Top GitHub Comments
The solution in #648 was to update package version to 3.0.5 and it seemed like it fixed the problem for some people but it’s still not working for me. Wrapping the component in
React.memo
also doesn’t work. I add stuff to the chart using the HTML canvas element it provides me but any activity on the chart just resets it back to it’s initial state and all of my additions just get removed.Closed due to inactivity