question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Prevent Chart re-rendering?

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:4
  • Comments:7

github_iconTop GitHub Comments

2reactions
yourAverageDevelopercommented, Oct 7, 2021

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.

0reactions
dangreencommented, Dec 10, 2021

Closed due to inactivity

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I prevent my chart from rerendering? (ReactJS) [closed]
Create a new component for the chart. Prevent the rerender by memoizing it with Higher Order Component memo .
Read more >
[Solved]-How do I prevent my chart from rerendering? (ReactJS)
Create a new component for the chart. Prevent the rerender by memoizing it with Higher Order Component memo . ... Though the issue...
Read more >
How to stop re-rendering lists in React? - Alex Sidorenko
I only want to update one component in the list, but all of them re-render.
Read more >
Updating Charts - Chart.js
# Preventing Animations ... Sometimes when a chart updates, you may not want an animation. To achieve this you can call update with...
Read more >
How to avoid chart render on sheet change?
Hi Folks, looking for help on this, Excel charts normally refresh/render when a chart sheet is activated. (moving from another sheet to the ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found