Recharts — React Charting Library

Overview

Recharts is a composable charting library for React that renders SVG and uses D3 for scales and shapes. A chart is a tree of components — a chart container such as LineChart, plus axes, grid, tooltip, legend and one component per data series — so line, bar, area, pie, scatter and mixed charts are all built the same way.

This skill targets Recharts 3 (3.10 at the time of writing). Version 3 rewrote the internal state and changed a few public APIs: custom tooltips are typed with TooltipContentProps, Cell is deprecated in favour of the shape prop or a fill field in the data, activeIndex is gone, keyboard accessibility is on by default, and since 3.3 a chart can size itself with the responsive prop instead of a ResponsiveContainer wrapper.

Instructions

Installation

npm install recharts react-is

react-is must be the same version as the installed react.

Common Chart Types