shadcn.io is not affiliated with official shadcn/ui
Data Analysis Chat Block for Ark UI
An analyst's chart message in a thread: every bar is a button that highlights it and quotes it above the composer, so your reply is anchored to that point and posts as a bubble with the quote.
Installation
Overview
Talk about a number, not just a picture of it, with this data analysis chat for React with Ark UI. A framed window of fixed height holds a thread with Brynja Falk, an analyst at Metricfold, whose chart message is a card in the log: a Toggle Group of three ranges (7, 30 or 90 days), a hand-built bar chart of orders whose every bar is a real button, and a caption with the peak and the total, derived from the typed series. Press a bar and it is highlighted and a quote chip ("Re: Tue 6 Oct, 412 orders") appears above the composer; your reply posts as a Bubble that carries the quote, and the analyst answers about that point. The composer's Shine Button is the only colored control. It's the starting point for a metrics review, a report thread or any chat anchored to data.
FAQ
What stays in the page, and how do I make it real?
Everything. The three series are typed arrays, the analyst's answers come from a short script keyed on the quoted point, and no query runs. To wire it for real, load the series for the chosen range where RANGES is read, send your reply with its quoted point id where post runs, and append the analyst's messages to the same list.
Does the chart have a text equivalent?
Yes, in two places. Every bar is a button whose name holds its figures ("Tue 6 Oct, 412 orders. Press to reply to this point."), so a screen reader walks the chart as a list of named buttons, and the caption states the peak and the total in words. Colour never carries the highlight: a pressed bar is solid foreground and announced as pressed.
How does the quote work?
A bar press stores the point, shows the chip and moves focus to the composer; pressing the same bar again, using the chip's close button or changing the range removes it. Sending posts your text with the quote inside the bubble and spends the chip, so one reply quotes one point.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. Send stays quiet while the field is empty and says so if pressed, and focus stays in the field after sending.