Bar chart
A grouped bar chart showing desktop vs mobile visitors by month.
<ChartContainer config={chartConfig} className="h-[300px]">
<BarChart data={chartData}>
<CartesianGrid vertical={false} />
<XAxis dataKey="month" />
<YAxis />
<ChartTooltip content={<ChartTooltipContent />} />
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer>Line chart
The same data rendered as a line chart with monotone curves.
<ChartContainer config={chartConfig} className="h-[300px]">
<LineChart data={chartData}>
<CartesianGrid vertical={false} />
<XAxis dataKey="month" />
<YAxis />
<ChartTooltip content={<ChartTooltipContent />} />
<Line type="monotone" dataKey="desktop" stroke="var(--color-desktop)" />
<Line type="monotone" dataKey="mobile" stroke="var(--color-mobile)" />
</LineChart>
</ChartContainer>With legend
Add ChartLegend inside the chart to label each data series.
<ChartContainer config={chartConfig} className="h-[300px]">
<BarChart data={chartData}>
<CartesianGrid vertical={false} />
<XAxis dataKey="month" />
<YAxis />
<ChartTooltip content={<ChartTooltipContent />} />
<ChartLegend content={<ChartLegendContent />} />
<Bar dataKey="desktop" fill="var(--color-desktop)" />
<Bar dataKey="mobile" fill="var(--color-mobile)" />
</BarChart>
</ChartContainer>Stacked area trend
Use stacked areas for cumulative pipeline, adoption, or capacity trends where both the total and the contribution of each series matter.
<ChartContainer config={acquisitionConfig} className="h-[320px]">
<AreaChart accessibilityLayer data={acquisitionData}>
<CartesianGrid vertical={false} />
<XAxis dataKey="week" />
<YAxis />
<ChartTooltip content={<ChartTooltipContent indicator="line" />} />
<ChartLegend content={<ChartLegendContent />} />
<Area dataKey="inbound" stackId="pipeline" fill="var(--color-inbound)" />
<Area dataKey="outbound" stackId="pipeline" fill="var(--color-outbound)" />
<Area dataKey="expansion" stackId="pipeline" fill="var(--color-expansion)" />
</AreaChart>
</ChartContainer>Composed forecast
Use a composed chart when a dashboard needs bars for actuals, a line for targets, and a reference threshold in the same frame.
<ChartContainer config={acquisitionConfig} className="h-[320px]">
<ComposedChart accessibilityLayer data={acquisitionData}>
<CartesianGrid vertical={false} />
<XAxis dataKey="week" />
<YAxis />
<ChartTooltip content={<ChartTooltipContent indicator="dashed" />} />
<ChartLegend content={<ChartLegendContent />} />
<ReferenceLine y={700} stroke="var(--color-target)" strokeDasharray="4 4" />
<Bar dataKey="inbound" fill="var(--color-inbound)" />
<Bar dataKey="outbound" fill="var(--color-outbound)" />
<Line dataKey="target" stroke="var(--color-target)" />
</ComposedChart>
</ChartContainer>Donut share
Use a donut chart for part-to-whole comparisons with a small number of categories. Keep labels in the legend and exact values in the tooltip.
<ChartContainer config={browserConfig} className="h-[320px]">
<PieChart accessibilityLayer>
<ChartTooltip content={<ChartTooltipContent hideLabel nameKey="browser" />} />
<ChartLegend content={<ChartLegendContent nameKey="browser" />} />
<Pie data={browserData} dataKey="visitors" nameKey="browser" innerRadius={64}>
{browserData.map((entry) => (
<Cell key={entry.browser} fill={entry.fill} />
))}
</Pie>
</PieChart>
</ChartContainer>Radar benchmark
Use radar charts for capability or maturity comparisons where each axis is a bounded score.
<ChartContainer config={capabilityConfig} className="h-[360px]">
<RadarChart accessibilityLayer data={capabilityData}>
<PolarGrid stroke="var(--color-border)" />
<PolarAngleAxis dataKey="capability" />
<PolarRadiusAxis domain={[0, 100]} />
<ChartTooltip content={<ChartTooltipContent />} />
<ChartLegend content={<ChartLegendContent />} />
<Radar dataKey="benchmark" fill="var(--color-benchmark)" />
<Radar dataKey="current" fill="var(--color-current)" />
</RadarChart>
</ChartContainer>Radial health score
Use radial bars for compact scorecards where categories share the same percentage scale.
<ChartContainer config={healthConfig} className="h-[340px]">
<RadialBarChart accessibilityLayer data={healthData} innerRadius="18%" outerRadius="88%">
<ChartTooltip content={<ChartTooltipContent hideLabel nameKey="name" />} />
<ChartLegend content={<ChartLegendContent nameKey="name" />} />
<RadialBar dataKey="value" background cornerRadius={8} />
</RadialBarChart>
</ChartContainer>Scatter correlation
Use scatter plots for correlation analysis. The x and y axes show the relationship, while ZAxis can encode magnitude.
<ChartContainer config={scatterConfig} className="h-[320px]">
<ScatterChart accessibilityLayer>
<CartesianGrid />
<XAxis type="number" dataKey="tickets" name="Tickets" />
<YAxis type="number" dataKey="satisfaction" name="Satisfaction" unit="%" />
<ZAxis type="number" dataKey="employees" range={[80, 420]} />
<ChartTooltip content={<ChartTooltipContent />} />
<Scatter data={scatterData} dataKey="employees" fill="var(--color-employees)" />
</ScatterChart>
</ChartContainer>