shadcn.io is not affiliated with official shadcn/ui
Chart examples · Line
A line chart with custom dots for React
A line chart that draws each data point as an icon instead of a dot.
Use it when the points mean something, like commits along a timeline. The dot prop takes a function that draws a Lucide icon centered on each point, stroked in the series color and filled with the background so the line doesn't show through.
Preview
Installation
FAQ
How are the dots drawn as icons?
Line sets dot to renderDot, which returns a GitCommitVerticalIcon centered on the point. DOT_SIZE is 24, and x and y are cx and cy minus half of that size.
How is the icon colored?
The icon sets stroke to var(--color-desktop), className to fill-background, and aria-hidden to true. width and height are both DOT_SIZE. key is payload.month.
What does the line itself use?
Line uses dataKey desktop, type natural, stroke var(--color-desktop), and strokeWidth 2. config maps desktop to var(--chart-1) and the label Desktop.
How are the month ticks shortened?
XAxis uses dataKey month and tickFormatter set to formatMonth, the first three characters. axisLine and tickLine are false, tickMargin is 8, and the side margins are 12.
Related
- A line chart with dotsA line chart with a dot on every data
- A line chart with dots and colorsA line chart whose dots take each
- An area chart with iconsA stacked area chart whose legend and
- A line chartA line chart drawing one series as a
- Accordion with Category IconsAn accordion of workspace sections, each
- A line chart with a labelA line chart with a dot on each point and