shadcn.io is not affiliated with official shadcn/ui
Community Growth Chart About Block for Solid
A community's growth in one framed area chart, month by month for a year, beside three channel counts (forum, chat, office hours) that roll up as they scroll into view.
Installation
Overview
A community growth block for Solid with Ark UI, written for Gatherly, a fictional place where developers help each other. The title states the growth in a sentence worked out from the data: the community is three times the size it was a year ago. Beside it, a split on a solid divider: at the start, a framed area chart of members by month, from twelve months ago to now, with the same two numbers repeated in a caption; at the end, three channel counts (forum members, chat members, office-hours seats), each with how many joined this month and one line on how alive the channel is. The counts roll up once when they scroll into view and keep their final width, so nothing shifts while they count; with reduced motion they are simply there. On a phone the chart sits between the title and the counts. For community pages, developer-relations updates and any about page that has to show a community is growing, not just big. The figures are example data.
FAQ
How do I change the numbers?
The chart reads MEMBERS, one reading per month with the oldest first, and the title's multiple, the axis ceiling, the curve and the caption are all computed from it, so the text and the drawing always agree. The three counts are CHANNELS: a label, a total, how many joined this month and a line of detail.
Is the chart a chart library?
No. It is one SVG path stretched into a box, with the gridlines, the axis numbers and the end dot as plain HTML placed by percentage, so it needs no chart code and renders on the server. The chart box is dir="ltr" so the time axis never flips in a right-to-left layout.
How is the chart read by a screen reader?
The chart is one image with a text name that gives the first month, the last month and the difference; the caption under it repeats the two numbers. The drawing's own parts are hidden from assistive technology so nothing is read twice. The counts are a description list: each channel is a term followed by its figure and its detail.