shadcn.io is not affiliated with official shadcn/ui
About
Use it when the points are categories whose colors people already know from the rest of the page: browsers, plans, regions. The line shows the drop from one to the next, and each dot ties its point back to that color in a legend or a pie. If the order of the categories means nothing, a bar chart is more honest.
A natural curve runs through five browsers, Chrome to Other, in one color. Each point is a larger dot in its browser's color. There's no x axis: the colors carry the categories, and the tooltip shows the visitor count with a line indicator in the dot's color.
Installation
Usage
import { ChartLineDotsColors } from "@/components/charts/chart-line-dots-colors";<ChartLineDotsColors />Customize
- Each row carries its own
fill, such as"var(--color-chrome)".<Line dataKey="visitors">passesdota function that returns a<Dot>withfillandstrokefrompayload.fillandr={5}. - The line strokes with
var(--color-visitors), from thevisitorsentry inchartConfig. - There's no
<XAxis>. Margins of 24px on the left, right and top keep the end dots from clipping. <ChartTooltipContent hideLabel indicator="line" nameKey="visitors" />names the row fromchartConfig.visitors.
FAQ
How does each dot get its own color?
<Line>'s dot prop is a function. It gets each point's payload and coordinates and returns a <Dot> filled and stroked with payload.fill, the color stored in the row.
How do I add a category?
Add a row with fill: "var(--color-opera)" and an opera entry in chartConfig. The dot reads payload.fill, so the row and the config must agree.
Should I add a legend for the colors?
Yes, unless the colors are explained elsewhere. Recharts' legend lists the <Line> series, not its dots, so build a small row of swatches from chartConfig under the chart, or use a bar or pie chart, which legend by category.
Why connect categories with a line at all?
It shows the falloff from the biggest browser to the smallest in one stroke. That works because the rows are sorted by visitors; unsorted categories give a zigzag that means nothing. For those, the Mixed Bar Chart is the better fit.
API Reference
ChartContainer
configChartConfig
Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.
initialDimension?{ height: number; width: number; }
The size it renders at before it's measured, so the first paint isn't * empty.
- Type
{ height: number; width: number; }- Default
INITIAL_DIMENSION
className?string
Merged with the part's classes.
ChartLegend
ChartLegendContent
<div>
hideIcon?boolean
Hides each series' icon (from config), leaving its color swatch.
- Default
false
nameKey?string
The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.
className?string
Merged with the part's classes.
ChartStyle
<style>
configChartConfig
The chart config whose colors it writes as --color-<key> variables.
idstring
The element's id.
ChartTooltip
ChartTooltipContent
<div>
hideIndicator?boolean
Hides each item's color indicator.
- Default
false
hideLabel?boolean
Hides the tooltip's label, the hovered point's.
- Default
false
indicator?"dashed" | "dot" | "line"
The color indicator's shape: a dot, a line or dashed.
- Type
"dashed" | "dot" | "line"- Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode
Formats the tooltip's label; its value is untyped, as in recharts 3.8.
- Type
(label: any, payload: TooltipPayload) → React.ReactNode- Parameters
label– anypayload– TooltipPayload- Returns
React.ReactNode
labelKey?string
The key in the data to read the label from, looked up in config.
nameKey?string
The key in each item's data to look its name up by in config.
className?string
Merged with the part's classes.
Related
Line Chart with Custom Labels
Line chartsEach point labeled with its category's name, in its color.
Line Chart with Dots
Line chartsA line with a dot on every data point.
Mixed Bar Chart
Bar chartsHorizontal bars, each category in a color of its own.
Pie Chart with Legend
Pie chartsA pie with a legend of its slices underneath.
Line Chart with Custom Dots
Line chartsA line with custom markers in place of plain dots.
Line Chart
Line chartsOne series as a smooth line over six months.