Command Palette

Search for a command to run...

Hectal
Phase 14Advanced15 of 19 in Data Visualization

Charts in React

Move the dashboard into a React app: D3 for the maths, React for the marks, refs for axes and zoom, and Recharts, visx, Chart.js and ECharts compared.

Most company front ends are React apps, so sooner or later a chart has to live inside one. The hard part is not drawing: it is that React and D3 both want to own the page. This phase gives you one clear rule for who owns what, and shows the few places where the rule bends: axes, zoom and canvas.

You build the same charts three ways: D3 for the maths with React drawing every mark, D3 writing into a ref that React leaves alone, and a ready-made library (Recharts). Then you meet visx, Chart.js, ECharts and Observable Plot, see what each one costs in size and in lines of code, and type a chart component with TypeScript.

At the end the Lumen dashboard runs as a React app: the rides line is D3 maths with JSX marks, the stations chart is Recharts, and every box has its own loading, error and empty state.

Phase 14 · the story

Arjun, engineer

“The company's main app is in React, and I have to move the dashboard into it without rewriting every chart from scratch.”

Lumen Bikes' rider app and its back-office pages are written in React. The dashboard so far is plain JavaScript that draws into boxes by id. On Tuesday the product manager asks Arjun to put it inside the back office, with the same login, the same menu and the same state as every other page.

Arjun tries the obvious thing: he calls his chart functions from a React component. The first draw works. The second draw, after a month change, doubles the axes. In development, React runs every effect twice and he sees two charts stacked on one canvas. A copy-pasted Recharts example draws nothing at all.

None of this is a bug in D3 or React. Each one has an owner for the page, and they have not agreed who. In this phase you agree it for them, move the rides line and the stations chart across, and keep the loading, error and empty states the dashboard already had.

In this phase

You will learn

  • Decide, for any chart, whether D3 or React owns each DOM node, and write the chart without the two fighting
  • Put D3 axes, zoom and canvas drawing into a ref and an effect with a proper cleanup, and explain StrictMode's double effect
  • Use Recharts, and tell when visx, Chart.js, ECharts or Observable Plot fits better
  • Run the Lumen dashboard as a React app in your Vite project

You write code in

In your Vite project lumen-dashboard/, now with React (run npm run dev), and in the editor on this page

Files you touch

  • vite.config.js
  • package.json
  • index.html
  • src/main.jsx
  • src/App.jsx
  • src/charts/RidesLine.jsx
  • src/charts/StationsBar.jsx
0/7 · 0%
7 topics ~4 h 15 code blocks & diagrams
Start with the first topic
1
14.1

D3 for Maths, React for the DOM

In a React app, let D3 do what it does without touching the page (scales, line and area paths, array helpers, formats) and let React draw every mark as JSX. One owner per DOM node means no fights and no stale charts.

26 min 2 code practice

2
14.2

The Exceptions: Axes, Brushes, Zoom and Transitions

Some D3 helpers must write into the page: axes, brushes, zoom and transitions. Give each one an element that React renders empty, hand it over through a ref, run it in an effect, and always return a cleanup. Then StrictMode's double effect is harmless.

27 min 2 code practice

3
14.3

Responsive and Fast Charts in React

Measure the chart's box with a useSize hook, stop unrelated state from redrawing the chart, put thousands of marks on a canvas behind one ref, and know what the React Compiler changes.

25 min 2 code practice

4
14.4

Recharts in Depth

Recharts draws a chart from React components: a chart, its axes, a grid, a tooltip, a legend and one component per series. It is quick to start, and has a few traps: a container with no height, many points, gaps and the default accessibility.

26 min 3 code practice

5
14.5

visx, Chart.js, ECharts and Observable Plot

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.

26 min 3 code practice

6
14.6

TypeScript for Charts

Type the rows a chart reads, the scales it builds and the props it takes. The compiler then catches a misspelt field, a missing value and the wrong kind of scale before the page ever runs, at the price of a few annotations.

23 min 2 code practice

7
14.7

Build: The Dashboard in React

Move the whole Lumen dashboard into React without losing a feature: the rides line is D3 maths with JSX marks, the stations chart is Recharts, and every earlier D3 chart is mounted unchanged through one small wrapper. It answers Arjun: the dashboard can now live inside the company's React app.

71 min 1 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

One rect per day

Bars draws an empty <svg>. Make it draw one <rect> for each day of week, with width={x(d.rides)}, a height of 18 and a y of 24 times its position.

Beginner
2

No NaN, ever

Bars crashes into NaN widths when a day has no reading, and draws an empty frame for an empty list. Fix it: leave out rows whose value is not a finite number, and show the sentence No data to draw. when nothing is left.

Intermediate
3

One axis, even in StrictMode

This component draws a D3 axis in an effect, and the page runs it in StrictMode, so the effect runs twice. Today two axes are drawn on top of each other.

Intermediate
4

The chart that draws nothing

This Recharts bar chart draws no bars: its container's parent has a width but no height. Fix it so the three bars appear, without changing the chart's width.

Intermediate
5

A useSize hook

Write the useSize hook: it returns [ref, { width, height }], measures the element in useLayoutEffect, keeps reporting with a ResizeObserver, and disconnects the observer in its cleanup.

Advanced