shadcn.io is not affiliated with official shadcn/ui
Price Chart Web3 Block for Ark UI
Ninety seeded daily candles of an invented token drawn as hand-built SVG with a 20-day mean, a 1 W, 1 M and 3 M range, a slider that scrubs a crosshair and reads open, high, low, close and change, and a table of 24 hour, 7 day and 30 day changes.
Installation
Overview
Read a token's recent price without a charting library, with this price chart panel for React with Ark UI. It's the chart screen of Chartbarn, a token chart tool, and the ninety daily candles of the invented PLVR token are a seeded sample, not market data. Each candle is drawn in SVG: a wick from the high to the low and a body from the open to the close, solid for a day that closed above its open and hollow for a day that closed below it, so up and down never depend on color. A lighter line is the 20-day mean. A 1 W, 1 M and 3 M range slices the same series. A slider scrubs a crosshair across the candles, and a list beside the chart reads the date, open, high, low, close and the change from the day before, written as a sign, an arrow and a word. Below, a small table gives the 24 hour, 7 day and 30 day changes of the last close. The same numbers are in a polite status line and in a table for screen readers. For token pages, wallets and market screens.
FAQ
Where does the series come from?
A module function builds it at load from a seeded hash and a slow sine drift, so it is the same on every visit: each candle opens where the day before closed, and its high and low reach a little past the body. Dates count back from a fixed last day, 12 October, not from the clock. It is not a price feed.
What is the lighter line?
The mean of the closes over the 20 days up to each day (fewer in the first days). It uses the whole series, so when you choose 1 W or 1 M the line is already settled at the start of the range.
How does the scrub work?
It is a range input under the chart. Moving it moves the crosshair and the list to that candle, and the position is kept as a count of days back from the last one, so changing the range keeps you on the same day when it is still in view. The arrow keys move one candle, Home and End go to the ends.
Can the chart be read without seeing it?
Yes. The drawing is hidden from assistive technology, and its content is in three places: the list beside the chart, the polite status line that speaks the candle under the crosshair, and a table of every candle in view that is only for screen readers.
What stays local, and how do I wire real prices?
All of it. There is no request and no clock. In your app load candles for the range from your price API, keep the same shape (open, high, low, close), compute the mean and the changes from them and keep the dates in UTC. Keep the sample label off only when the data is real and says where it comes from.