Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Data Analyst Chart Answer AI Block for React Aria

Ask a sample question and get a headline derived from the data, a hand-built bar chart of Q2 and Q3, a Chart and Table switch, a Group by plan or region select, and a How I got this section with the SQL and assumptions.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people see an answer as a chart first and check how it was made, with this analyst card for React with React Aria. Pivotlark, a question-first analyst, starts with a question field, two sample chips and the Shine Button Ask. The answer is a headline built from the typed rows ("Revenue grew 17% in Q3, led by Pro": the growth and the leader are derived), a hand-built SVG bar chart of Q2 against Q3 in foreground weights, and a Toggle Group that switches to a Table of the same numbers. A Select groups by plan or region, and a Collapsible called How I got this shows the SQL in Syntax Text and the assumptions. For BI assistants, reports and any answer that should show its working.

FAQ

What stays in the page, and how do I make it real?

Two questions times two groupings are typed in the file as small rows of name, Q2 and Q3. The headline, the bar heights, the table and the SQL are all computed from those rows. Nothing is queried and no model answers. To wire it for real, return rows of that shape from your query and keep the rest.

Where does the headline come from?

From the data: the growth is the total for Q3 against Q2, rounded, and the leader is the category that gained the most. Change the numbers and the sentence changes with them, so it cannot disagree with the chart.

How is the chart made accessible?

The drawing is an image with a label that lists every category with its Q2 and Q3 values, the category names and Q3 values sit under it as text, and the Table view shows the same rows with the change. The chart and the table take the same space, so switching never moves the page.

What does Group by change?

The rows (plans or regions), the chart, the table, the headline's leader and the SQL's grouping column. The question stays the same.

How does it work from the keyboard?

The switch is a toggle group the arrow keys move through, the select opens with Enter or Space, and How I got this is a button that opens its section. The status line announces the new headline after Ask.

How does it look on a phone?

The chart is 224 pixels tall and the four categories sit under it in a row, with the names cut short if needed and the Q3 value below each. The controls wrap.

All 100 ai blocks