shadcn.io is not affiliated with official shadcn/ui
Chart examples · Line
An interactive line chart for React
A line chart of three months of daily page views with dates on the axis and in the tooltip.
Use it for daily data over weeks or months. Three months of daily page views are one monotone line at a fixed height, minTickGap keeps the date ticks apart, and the tooltip shows the full date. The series on show is set by one constant.
Preview
Installation
FAQ
How do I chart the mobile series?
activeChart is "desktop". Set it to "mobile". Line uses dataKey={activeChart} and a stroke of var(--color- plus that key. config maps desktop to var(--chart-1) and mobile to var(--chart-2).
How is the line drawn?
Line sets type="monotone", dot={false}, and strokeWidth={2}. monotone curves between the daily points, and dot={false} leaves the stroke without markers. Only the activeChart key is plotted.
How do the axis and the tooltip format dates?
XAxis sets dataKey="date", minTickGap={32}, and tickFormatter={formatDateTick}, a short month and day. labelFormatter is formatDateLabel, which adds the year, so the tooltip title reads like Apr 1, 2024. The content also sets a fixed width, w-[150px].
Why does the tooltip say Page Views?
ChartTooltipContent sets nameKey="views". The views entry in config has the label Page Views, and that becomes the row name for the series on the chart.
Related
- A line chartA line chart drawing one series as a
- An interactive area chartA stacked area chart of three months of
- An interactive bar chartA bar chart of three months of daily page
- A multiple line chartA line chart comparing desktop and mobile
- Expandable Sub-Rows Data TableA table of projects where each row
- A line chart with dotsA line chart with a dot on every data