shadcn.io is not affiliated with official shadcn/ui
Chart examples · Line
A line chart with a label for React
A line chart with a dot on each point and its value printed above it.
Use it when the exact values should be on the chart, not only in the tooltip. The line has a dot on each month and a LabelList above it printing the value, with a top margin so the highest label isn't clipped.
Preview
Installation
FAQ
How is the number printed above each point?
Line wraps a LabelList with position top, offset 12, fontSize 12, and className fill-foreground. The list has no dataKey, so the text is the line's desktop value.
Why is there room above the line?
LineChart sets margin to { top: 20, left: 12, right: 12 }. The top inset keeps labels such as February's 305 inside the container.
How are the dots drawn?
Line sets dot to an object whose fill is var(--color-desktop), and activeDot to { r: 6 }. type is natural, stroke is var(--color-desktop), and strokeWidth is 2.
How are the months abbreviated?
XAxis uses dataKey month and tickFormatter set to formatMonth, which returns the first three characters. axisLine and tickLine are false, and tickMargin is 8.
Related
- A line chartA line chart drawing one series as a
- A line chart with a custom labelA line chart labeling each point with its
- A bar chart with a labelA bar chart with each bar's value printed
- A line chart with dotsA line chart with a dot on every data
- A simple area chartA single-series area chart with a smooth
- A multiple line chartA line chart comparing desktop and mobile