Recharts in Depth

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

series

One set of marks for one field of the data: a Bar, a Line or an Area.

dataKey

The name of the field in each row that a component reads (dataKey="rides").

ResponsiveContainer

A Recharts component that measures its parent and gives the chart that width and height.

tick

One mark and label on an axis.

payload

What Recharts hands to a custom tooltip: the entries under the pointer, each with its value.

connectNulls

A Line option: draw a line across a missing value instead of leaving a gap.

accessibilityLayer

Recharts' built-in keyboard support and role="application" on the chart (on by default in version 3).

1. 1

   Change which bar is highlighted

   In the first example change props.rides === top to props.month === "Dec". The shape function reads the row's fields, so orange bars: 1 still, but it is now December.

2. 2

   Fix the trap with aspect

   In the second example give the first parent an aspect ratio instead of a height: change <ResponsiveContainer width="100%" height="100%"> to <ResponsiveContainer width="100%" aspect={2}>. With a width of 300, the container computes a height of 150, so the first parent now draws its 3 bars. The second parent (no width) still draws none and still warns, now with height(undefined) and aspect(2) in the message.

3. 3

   Turn the dots off in the second chart

   In the third example change dots={true} to dots={false} for chart b. It prints line pieces: 1, dots: 0: the line is joined across the gap and the 362 circles are gone.

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves: writing every scale, axis, gridline and tooltip by hand (Topic 14.1) is correct and slow. Recharts gives you all of them as components, so a normal bar or line chart is about fifteen lines. It draws plain SVG, so everything you know about SVG still applies. This Phase uses Recharts 3.10.1.

2. 2

   The parts. A chart component (BarChart, LineChart, AreaChart, ComposedChart) takes data, an array of objects. Inside it you place XAxis and YAxis (with dataKey naming the field), CartesianGrid, Tooltip, Legend, and one series component per field: Bar, Line, Area, each with dataKey. The order of children is the paint order.

3. 3

   **ResponsiveContainer fills its parent.** Give it width="100%" and height="100%" and it measures the parent with a ResizeObserver. The parent therefore needs a real width and a real height from CSS. If the parent has no height, the chart has height 0 and draws nothing: the number one Recharts problem (second example).

4. 4

   The size-0 warning is not reliable. Recharts logs a warning only when both the width and the height are 0. A parent that has a width but no height gives height 0 and no warning at all: the chart is silently empty. Always give the parent a height (height: 260), or pass aspect to the container.

5. 5

   Customise with functions and elements. Tooltip takes content={<MyTip />}: Recharts passes active, payload and label. Bar takes shape={(props) => <Rectangle {...props} fill=... />} to colour or reshape single bars. The older Cell component still works but is deprecated and will be removed in Recharts 4.0. Tick text takes tick={{ fontSize: 12 }} or a component, and tickFormatter.

6. 6

   Animation is on by default. A new bar grows and a changed line morphs, which is nice for a first draw and tiring when a chart updates every second. Set isAnimationActive={false} on the series, or respect prefers-reduced-motion (Topic 9.5) by setting it from matchMedia.

7. 7

   Gaps, one point, empty data. A null value leaves a gap in a Line unless connectNulls is true. One point draws one dot only when dot is on (a single point has no line). An empty data array draws an empty frame with axes but no message: Recharts does not know what your empty state should say, so you write it (if (data.length === 0) return <p>...</p>), as in Topic 14.1.

8. 8

   Many points. A default Line draws a dot for each point. For 365 days that is 365 extra SVG circles and a slow tooltip. Set dot={false}, keep activeDot for the hovered one, and turn animation off. Beyond a few thousand points, reduce the data (Topic 12.4) or draw to a canvas.

9. 9

   Accessibility is on by default, and unfinished. Since Recharts 3 the chart's <svg> gets role="application" and tabIndex={0}, and the arrow keys move the tooltip (accessibilityLayer). It has no name or description until you set title and desc on the chart. Add them, and give people a table of the numbers (Topic 15.3).

• ↔

  Recharts is the quickest way to a standard, interactive, responsive chart and has the most users, but a custom visual (a calendar heatmap, an annotated timeline) fights its component model. D3 maths plus JSX scales to anything, at the cost of writing the parts yourself.

• ↔

  Its default animation, dots and accessibility layer are tuned for demos. Production charts usually switch several of them off or replace them.

• I can build a bar and a line chart with Recharts, with axes, tooltip and legend.

• I can fix a chart that draws nothing because its container has no height.

• I can style single bars with shape, knowing Cell is deprecated.

• I can handle gaps, many points and empty data in a Recharts line chart.

• I can add the name, description and data table that Recharts does not.