shadcn.io is not affiliated with official shadcn/ui
Chart examples · Line
A line chart with a custom label for React
A line chart labeling each point with its browser's name from the chart config.
Use it when each point stands for a named thing rather than a moment. Each point is a browser, and a LabelList turns its key into the label from the chart config, so the line reads Chrome, Safari, Firefox instead of numbers.
Preview
Installation
FAQ
How do the points say Chrome above them?
LabelList sets dataKey to browser and formatter to formatBrowser. That function looks the key up in chartConfig and returns label, so chrome prints as Chrome. position is top, offset is 12, and fontSize is 12.
How is that label text styled?
LabelList uses className fill-foreground. LineChart sets margin to 24 on the top, left, and right so the names fit. This chart has no XAxis. The browser name is the label above the point.
What is drawn on each point?
Line sets dot to an object whose fill is var(--color-visitors), and activeDot to { r: 6 }. dataKey is visitors, type is natural, stroke is var(--color-visitors), and strokeWidth is 2.
Where does the line color come from?
config gives visitors color var(--chart-2) and the label Visitors. The keys chrome through other have their own colors and labels. formatBrowser uses those labels for the text.
Related
- A line chart with a labelA line chart with a dot on each point and
- A line chart with dots and colorsA line chart whose dots take each
- A bar chart with a custom labelA horizontal bar chart with the month
- A line chartA line chart drawing one series as a
- An area chart with iconsA stacked area chart whose legend and
- A multiple line chartA line chart comparing desktop and mobile