shadcn.io is not affiliated with official shadcn/ui
Sparkline Range Card Stats Block for Vue
A price inside its 52-week range for a trading journal: a line between two labelled hairlines for the high and the low, today's close as a dot, and the position in the range as a percent and a meter.
Installation
Overview
A sparkline card with a range for Vue with Ark UI. A start-aligned header says how far up its 52-week range an index sits, "Tern 50 sits 76% of the way up its range", and a split follows. At the start, the 52-week low, the 52-week high and today's close as a list, each with when it happened. At the end, a framed figure (a hairline frame with a + on each corner): 52 weekly closes as a line under a soft fade, between two hairlines that carry the high and the low on their own labels, a hollow dot where the line touches each and a filled one on today's close with its value beside it. Under the chart, the position in the range as a big percent and a meter. Everything is computed from one series of weekly closes, so the text and the drawing agree. On a phone the figure comes before the list. The figures are an example from a fictional index, not advice. It is built from Guides, hand-drawn SVG and CSS transitions.
FAQ
How do I change the data?
Edit LOW and HIGH for the range and ANCHORS for the shape of the year (each entry is a week and a position from 0 to 1). The weekly closes are that shape plus a little seeded noise, fitted so the lowest close is exactly LOW and the highest HIGH; replace CLOSES with your own 52 values and everything else is found from them: the dots, the labels, the percent and the list.
How is the position worked out?
It is today's close less the low, over the high less the low, rounded to a whole percent. The headline, the readout and the meter all use that one number. The meter is a drawing, hidden from assistive technology, because the readout beside it says the same in words.
Is it accessible?
Yes. The line is an image whose name gives the low and the high with how long ago each was, and this week's close. The same numbers are in the list at the start, a description list, and the labels on the hairlines are text. The chart is dir="ltr" and values sit in bdi elements.
Why is it all one colour?
The chart uses your theme's text colour at a few weights, with the range lines as plain hairlines, so it is correct in every preset, light and dark, and readable without colour.