shadcn.io is an independent project built on shadcn/ui
Six visitor bars. Some grow up from zero and some grow down. Positive bars use one chart color, negative bars another, and the month name sits above each bar. There is no category axis.
Use it for a series that swings both ways, such as growth and decline. If the sign has to be read as a number, use a Table. In React, Ark UI does not color a bar by its sign. Each row carries its own fill.
Installation
Anatomy
Usage
<div className="w-full max-w-xl rounded-md border bg-background p-4">
<ChartContainer config={chartConfig}>
<BarChart accessibilityLayer data={chartData}>
<CartesianGrid vertical={false} />
<ChartTooltip content={renderTooltipContent} cursor={false} />
<Bar dataKey="visitors">
<LabelList dataKey="month" fillOpacity={1} position="top" />
</Bar>
</BarChart>
</ChartContainer>
</div>FAQ
How do positive and negative bars get different colors?
The file maps each row's fill to var(--chart-1) when visitors is greater than 0, and to var(--chart-2) otherwise. Bar uses dataKey visitors and takes fill from the row. March is -207 and May is -209.
Where do the month names come from?
LabelList inside Bar sets dataKey to month, position to top, and fillOpacity to 1. This chart has no XAxis, so those labels are the month text.
How do some bars hang below the baseline?
chartData includes negative visitors values, and Bar plots those down from zero. CartesianGrid sets vertical to false, leaving the horizontal lines across that range.
What does the tooltip include?
ChartTooltipContent sets hideLabel and hideIndicator, and cursor is false. config only names visitors as Visitors. The bar colors are var(--chart-1) and var(--chart-2) on each row.
API Reference
Chart
Sets config={chartConfig}, content={renderTooltipContent} and cursor={false}. The rest is on the Chart page.
