shadcn.io is not affiliated with official shadcn/ui
Burndown Chart Card Stats Block for Svelte
A sprint burndown in a card in a card: the ideal burn as a dashed line, the actual remaining work as a solid one, the gap shaded, a tick where scope was added and a band of three figures under the chart.
Installation
Overview
A burndown chart for Svelte with Ark UI. A centred header says how far behind the sprint is, "Sprint 14 is 15 points behind its ideal burn", and on which day. Below it sits a card in a card, a tinted shell with a plus on each corner and a raised panel inside it. The chart draws the ideal burn as a straight dashed line from the points committed to zero, the actual remaining work as a solid line that stops at today with a dot, the gap between the two shaded, and a hairline tick on the day scope was added with its label. A legend that is real text names each mark. Under the chart a band of three cells (points remaining, what the ideal says should remain today, working days to go) rolls to its figures once the panel scrolls into view. Every path, figure and the headline are computed from one typed list of daily readings, so the text and the drawing agree. The chart is SVG in foreground weights and follows your theme.
FAQ
How do I change the sprint?
Edit DAYS, COMMITTED, REMAINING (the points left at the end of each day so far, starting with the plan on day zero), SCOPE (the day points were added and how many) and CEILING. Today is the last reading, so adding a day moves the dot, the shaded gap, the three figures and the headline together. The ideal is a straight line from COMMITTED to zero over DAYS.
How is added scope shown?
Scope added in the sprint makes the actual line rise instead of fall, as on day 5 here. The block also marks the day with a hairline and a label ("+6 points") so a rise is never read as slow work. The ideal line stays the original plan; if your team re-baselines the ideal when scope changes, replace idealOn with your own function.
Why is the gap shaded and not coloured?
The shaded area between the lines is foreground at a low weight, so it reads in every theme and without colour. Whether being behind is bad depends on the team, so the block states the number in words and leaves the judgement to the reader.
Is the chart accessible?
Yes. The drawing is an image whose name gives the points committed, the points remaining against the ideal and the scope that was added. The three figures under it are a description list that repeats the numbers, the legend is text, and the digits are in bdi elements. The chart box is dir="ltr" because time runs from the start to the end in every language.
What moves, and what happens on a phone?
The header and the card fade up once and the lines draw in from the start; the three figures roll to their values when the panel scrolls into view. With reduced motion everything simply appears. On a phone the chart takes a 4 by 3 shape, shows every other day label and the three figures stack as rows.