shadcn.io is not affiliated with official shadcn/ui
Chart examples · Line
A line chart with dots for React
A line chart with a dot on every data point and a larger dot on hover.
Use it when readers need to find the exact months along a trend. The line is a smooth curve with a dot on every point, and the hovered point grows into a larger active dot.
Preview
Installation
FAQ
How are the dots turned on?
Line sets dot to an object whose fill is var(--color-desktop). activeDot is { r: 6 }, so the hovered point is drawn at radius 6. dataKey is desktop, type is natural, and strokeWidth is 2.
Where does the line color come from?
config sets desktop to the label Desktop and color var(--chart-1). Line uses that same var(--color-desktop) for stroke and for the dot fill.
How are the months abbreviated?
XAxis uses dataKey month and tickFormatter set to formatMonth, which returns value.slice(0, 3). axisLine and tickLine are false, tickMargin is 8, and the side margins are 12.
What grid is behind the line?
CartesianGrid sets vertical to false. LineChart sets accessibilityLayer, so the points can be reached from the keyboard.
Related
- A line chartA line chart drawing one series as a
- A line chart with custom dotsA line chart that draws each data point
- A line chart with dots and colorsA line chart whose dots take each
- A line chart with a labelA line chart with a dot on each point and
- A simple area chartA single-series area chart with a smooth
- A multiple line chartA line chart comparing desktop and mobile