Prevent Chart re-rendering?

[seikosantana]

Any 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.

[FortisFortuna]

I get this problem too

[FortisFortuna]

Seems similar to #648

[yourAverageDeveloper]

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.

[dangreen]

@seikosantana @FortisFortuna @yourAverageDeveloper Hi. Would you please try react-chartjs-2@v3.2.0? Is this issue still there?

[seikosantana]

@dangreen I no longer work on that project but will try that out when i have time.

[yourAverageDeveloper]

@dangreen Yeah I also moved away from the project where I encountered this issue but upgrading the package started causing some other weird problems with the chart. I had the responsive flag enabled and there was a very slight scale glitch that would happen with Line charts where the chart would zoom in by 3-4% when hovered. After the update, the zoom became very prominent and violent so the entire line in the chart would shake in a weird way and then the values inside it would also change. So for now I've just downgraded it back to 3.1.0. I will, however, see if I can go back and reproduce the example that we were all talking about here and I'll let you know.

[dangreen]

Closed due to inactivity

[TonniPaul]

I am having this same issue, whenever I update a state that is completely different from the chart's state, it re-renders the chart