shadcn.io is not affiliated with official shadcn/ui
Chart examples · Line
A line chart with dots and colors for React
A line chart whose dots take each browser's color from the data.
Use it when each point belongs to a category with its own color. The line is one stroke in the series color, and the dot function draws each point's dot in the fill its data row carries, one color per browser.
Preview
Installation
FAQ
How does each dot get its own color?
Line sets dot to renderDot. That function renders a Dot with r 5, and both fill and stroke set to payload.fill. key is payload.browser.
Where does payload.fill come from?
Each row sets fill to a variable such as var(--color-chrome). config maps chrome, safari, firefox, edge, and other to --chart-1 through --chart-5 and to labels like Chrome.
What color is the stroke between the dots?
Line sets stroke to var(--color-visitors), strokeWidth to 2, type to natural, and dataKey to visitors. config gives visitors the color var(--chart-2) and the label Visitors. The browser colors are the dot fill values.
Why is the chart padded on the top and sides?
LineChart sets margin to 24 on the top, left, and right. There is no XAxis in this file. CartesianGrid sets vertical to false.
Related
- A line chart with dotsA line chart with a dot on every data
- A line chart with custom dotsA line chart that draws each data point
- A mixed bar chartA horizontal bar chart with a different
- A line chartA line chart drawing one series as a
- A simple area chartA single-series area chart with a smooth
- A line chart with a custom labelA line chart labeling each point with its