shadcn.io is not affiliated with official shadcn/ui
Count Buckets Histogram Stats Block for Ark UI
An order-value histogram of eight $25 buckets with the count above each column, the most common bucket drawn solid, the median bucket underlined and three figures above the chart: orders, the median bucket and the busiest bucket's share.
Installation
Overview
A plain histogram for React with Ark UI. A centred header names the most common order size ("Most orders are $50–75") and one framed figure holds the rest. At its top, three figures: the orders counted (a rolling number), the bucket the median order falls in and the most common bucket with its share in its label. Under them, eight columns, one per $25 of order value, with the count above each column and the bucket's range under it. The most common bucket is solid, the others a lighter weight, and the median bucket's label is underlined. The counts, the total, the median bucket and every share are computed from one typed list of counts, and a visually hidden table holds the numbers. On a phone the labels show the lower edge of every other bucket. The columns grow from the baseline once on load. It's built from SlidingNumber and Guides, in your theme's foreground colour.
FAQ
How do I change the buckets?
Edit COUNTS at the top of the file: one count per bucket, from the smallest orders up. WIDTH is the width of a bucket in dollars; the last bucket has no upper edge and is labelled "$175+". For another number of buckets change grid-cols-8 in the two lists to match. Heights, the total, the median bucket (where the running count first reaches half) and every share are computed.
How are the column heights set?
Each column's height is its count as a share of the biggest count, over the room the chart leaves under the count labels, so the tallest column never touches the label above it. Counts are written above every column, so the chart can be read without the heights.
Is the chart accessible?
Yes. The columns are drawn for the eye and hidden from assistive technology; the chart has an accessible name that lists every bucket and its count, and a visually hidden table inside the figure gives each bucket's count and share. The three figures are a description list in text. The chart box is dir="ltr" because order values run from small to large in every language, and values sit in bdi elements.