shadcn.io is not affiliated with official shadcn/ui
Chart examples · Bar
A bar chart with negative values for React
A bar chart with bars above and below zero, colored by sign and labeled by month.
Use it for numbers that swing both ways: profit and loss, growth and decline. Bars grow up or down from zero, each row gets a fill of --chart-1 or --chart-2 by the sign of its value, and a LabelList names the month above each bar. There is no X axis; the labels stand in for it.
Preview
Installation
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.
Related
- A bar chartA bar chart with rounded corners
- A mixed bar chartA horizontal bar chart with a different
- A simple area chartA single-series area chart with a smooth
- A multiple bar chartA bar chart grouping desktop and mobile
- A line chartA line chart drawing one series as a
- A stacked bar chart with a legendA bar chart stacking desktop and mobile