React Chart Component Examples

The baseline example is a grouped bar chart with two series. The data array holds one row per month, and config gives each series a display label and a token color. Inside <Chart>, the four helpers do the presentation work: Chart.Grid draws horizontal guide lines only, Chart.XAxis prints the month labels without tick marks or a baseline, Chart.Legend renders a swatch and label per series at the bottom, and Chart.Tooltip shows a themed panel on hover with the cursor band switched off.

The tooltip reads labels from your config, so the panel says "Desktop" rather than the raw desktop key, and numeric values are formatted with toLocaleString() in a monospaced, tabular font so digits align. The container defaults to w-full aspect-video min-h-[200px]; pass a className such as aspect-square or h-64 to resize it. Wrap the chart in a Card to give it a title and a border in a dashboard grid.

Give both <Bar> elements the same stackId and Recharts draws them on top of each other instead of side by side. Stacked bars answer a different question from grouped ones: the total height shows the combined value per month, and each segment shows its share. Use them for traffic by device, revenue by plan, or any breakdown where the sum matters as much as the parts.

The only styling detail is the corner radius. A uniform radius={4} would round the seam between segments, so the bottom series gets no radius and the top series uses radius={[4, 4, 0, 0]} — top-left, top-right, bottom-right, bottom-left — so only the outer edge of the stack is rounded. The tooltip lists both series for the hovered month, which is usually enough without a separate total row. The data and config objects are the same ones used in the bar example above.

Switch to LineChart and Line when the reader cares about direction over time more than individual values. type="monotone" smooths the curve without overshooting data points, strokeWidth={2} keeps the line legible at small sizes, and dot={false} removes the point markers that clutter a six-month trend.

The one change on the Drivn side is the tooltip indicator. Passing content={<Chart.TooltipContent indicator="line" />} to Chart.Tooltip replaces the square swatch beside each series with a thin vertical bar, which visually matches a line series better than a block of color. Because Chart.Tooltip spreads your props after its defaults, supplying content is all it takes — the cursor stays off. The same override works for every chart type, and the Chart props reference lists both indicator values.

An area chart is a line chart with the space underneath filled in, which gives a single metric more visual weight on a dashboard overview. Set both stroke and fill to the same config variable and lower fillOpacity to 0.2 so the grid lines stay visible through the fill. This example plots one series and leaves out the legend, since a single area labelled by the surrounding card title does not need one.

Because the color comes from var(--color-desktop) and that variable resolves to a chart token, the fill and stroke both switch with the theme — a near-black area on the light theme becomes a near-white one on dark. For a multi-series area chart, add a second <Area> with its own key and consider a stackId so the layers do not hide each other. Pair it with a Skeleton placeholder while the data loads.

Pie charts flip the data model: each row is a slice, so the color lives on the row as fill="var(--color-chrome)" and the config maps every browser value to a label and one of the five chart tokens. Set nameKey="browser" on <Pie> so the tooltip and legend look labels up by browser name. Pass content={<Chart.TooltipContent hideLabel />} to drop the heading, since a pie slice has no axis label to show.

For a donut, add innerRadius={60} and render two Recharts <Label> children inside the <Pie> — one for the total, one for its caption. The labels take Tailwind classes such as fill-foreground and fill-muted-foreground, so the center text follows the theme like the rest of the chart. strokeWidth={5} opens a gap between slices; the container already makes sector strokes transparent through [&_.recharts-sector]:stroke-transparent in its root styles.

Dashboards often show one metric at a time with a switch to change it. Hold the active key in useState, render a compact Tabs list above the chart, and feed the key to a single <Bar> as both dataKey and the key inside the fill color variable. Because the config already defines --color-desktop and --color-mobile on the container, the bar recolors as soon as the tab changes, with no lookup table of its own.

The Tabs here are controlled through value and onChange and render only the tab list — there are no panels, because the chart itself is the content. Recharts animates the bar heights between series on each switch. The same pattern scales to time ranges: keep a range state, filter data before passing it to BarChart, and let the tabs choose between 7, 30, and 90 days.