shadcn.io is not affiliated with official shadcn/ui
Diverging Bar Chart Stats Block for React
Twelve monthly returns as bars above and below a labelled zero line: gains solid, losses outlined, every value at its tip with a sign, and no green or red.
Installation
Overview
A diverging bar chart for React with Base UI. A centred header counts the months that ended higher and compounds the year, "Up in 8 of 12 months, +19.9% over the year". Under it a framed chart draws the twelve monthly returns around a zero line: a gain is a solid bar that rises from the line, a loss is an outlined bar that hangs from it, and each bar carries its value at the tip with a sign (a true minus for losses). The gridlines are solid hairlines with signed labels, and the zero line is drawn darker and labelled in bold. A row of three facts (best month, worst month, the year compounded) and a legend that is real text sit under the chart. Every height, label and figure is computed from one typed series. There is no green and no red: the sign, the side of the line and the fill tell a gain from a loss, so the chart reads in any theme and without colour.
FAQ
How do I change the returns?
Edit MONTHS and RETURNS (percent per month, oldest first) at the top of the file. Bar lengths, labels, the best and worst month, the compounded year, the headline and the chart's accessible name are all derived from them. REACH sets how far the chart extends above and below zero; keep it above your largest absolute return, and change TICKS to match.
Why are losses outlined instead of red?
Colour should not be the only signal, and "red is bad" depends on the figure and on the reader's culture. A solid bar and an outlined bar differ in shape and weight, they sit on opposite sides of the zero line and their labels carry a sign, so the chart is clear in greyscale, in dark mode and for people who cannot tell red from green.
Is the chart accessible?
Yes. The bars are drawn for the eye and hidden from assistive technology; the chart has an accessible name that summarises the gains, losses, best and worst month, and a visually hidden table lists every month with its return. Values use a true minus sign, the figures are in bdi elements and the chart box is dir="ltr" so time and the sign keep their order in right-to-left languages.
Related
- Pro
Target Line Bar Chart Stats
Bar and columnFourteen daily bars against a labelled quota line in a framed chart, days at or above the quota solid and days below it outlined, with a two-cell band under it for days met and the average against the quota.
- Pro
Waterfall Chart Stats
Bar and columnA quarter's operating profit walked from last quarter to this one in six floating bars with hairline connectors, totals at full weight, gains at 60% and losses as outlines, with the net change in the header.
- Pro
Grouped Bar Chart Stats
Bar and columnTwo bars per month, this year solid and last year lighter, with a Chart and Table switch that swaps the drawing for a real table of the same numbers in the same box.
- Pro
Lollipop Chart Stats
Bar and columnA week of steps as seven thin stems topped by dots, the count above each, a goal hairline and a ring around the peak, in a split with the week's total, the daily average and the days at goal.
- Pro
Slope Chart Stats
Area and lineSix clubs on two vertical axes, after the first and the second quarter, with a solid 2 px line for a club that climbed and a dashed 1 px line for one that slipped, labelled at both ends with the change.
- Pro
Vertical Bar Chart Stats
Bar and columnSeven weekday columns for a gym's check-ins in a card in card, the busiest day drawn in full and the others at 30%, with the count above each column and a one-line takeaway under the axis.