Chart.js and ECharts in StrictMode: without and with cleanup
Two charts are broken on purpose: the console shows what StrictMode finds. Chart.js throws, and React logs which component failed. ECharts only warns, and then works with two instances on one box.
Four more ways to draw a chart in a React app: visx (D3 maths in small React parts), Chart.js and ECharts (canvas libraries driven by a config object), and Observable Plot (a short grammar for fast exploration). Each has a cost, and a table helps you choose.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a ChartJsBar component with useRef and useEffect that takes labels and values, destroys the chart in cleanup, and updates the existing chart when the props change instead of creating a new one.
A teammate passes option={{ series: [...] }} inline to an ECharts wrapper and the chart flickers on every hover. Explain and fix it.
Explain it without notes
Name the three questions you would ask to choose between D3 + JSX, Recharts, ECharts and Plot for a new chart.
Why does a Chart.js chart created in useEffect throw under StrictMode, and what is the fix?
What does it mean that visx scales are "D3's scales behind a config object"?
What do npm download counts tell you, and what do they not?
Preview
Console
Nothing logged yet.Expected console output
Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused.
Uncaught Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused.
An error occurred in the <ChartNoCleanup> component.
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.
[ECharts] There is a chart instance already initialized on the dom.
Chart.js good chart drawn: true
ECharts good chart alive: true | renderer: canvas