shadcn.io is not affiliated with official shadcn/ui
Diverging Bar Chart Stats Block for Radix UI
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 Radix 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.