shadcn.io is not affiliated with official shadcn/ui
Scatter Plot Stats Block for Vue
Twenty-eight products on a price and rating plot with median cross-lines that make four labelled quadrants, a dashed trend line, three named outliers and a list of takeaways beside it.
Installation
Overview
A scatter plot for Vue with Ark UI. A split with a hairline divider: at the end, a compact header, "Price explains only 30% of a rating", and three takeaways; at the start from lg, a framed plot of 28 kitchen products on two axes, price in dollars against average rating. A cross at the median price and the median rating makes four quadrants, each labelled with its name and its count, a dashed least-squares line shows the trend, and the three products furthest from that line are named beside their dots. The medians, the trend, the correlation, the quadrant counts and the outliers are computed at module scope from the 28 readings, never typed. The dots are drawings, not controls, and the same readings are an unseen table for screen readers. On a phone the order is the header, the plot and then the takeaways, and the outliers' names move to the takeaways. For reviews, pricing research and any two-variable comparison.
FAQ
How do I use my own points?
Edit PRODUCTS at the top of the file (a name, a price and a rating each) and the axis constants PRICE_MAX, RATING_MIN and RATING_MAX. The medians, the trend line, the correlation and its share of the rating, the quadrant counts, the three outliers (the largest distances from the trend line) and the headline are all computed from the list. Keep the data away from the corners if you keep the quadrant labels there.
How are the quadrants decided?
A product is cheap if its price is under the median price and loved if its rating is over the median rating, so each quadrant holds a count that always adds up to the total. The cross-lines are drawn at the same medians, and the key says what they are. The labels sit in the plot's corners, and the dots keep a ring of the page colour so overlapping points stay separate.
Why can't I click the dots?
They do nothing, so they aren't buttons: a control that goes nowhere only adds tab stops. Every reading is in the unseen table with its quadrant, and the three outliers are named in the plot and in the takeaways. If you add something to do on a dot (open the product, say), make it a real button with a name and a visible focus ring, and announce what it picked in a live region.
Is the plot accessible?
The plot is hidden from assistive technology. The figure's caption states the medians and the trend, an unseen table lists every product with its price, rating and quadrant, and the takeaways give the correlation, the biggest group and the outliers in words. Numbers sit in bdi elements and the plot box is forced left to right, so price grows from the start in every language.
What changes on a phone?
The plot becomes taller than it is wide, the quadrant labels wrap and the outliers keep a larger dot but lose their name tags, which the takeaways list in the same order. The header, the plot and the takeaways stack with the plot second, so the chart is still near the top. The figure fades up once on load; with reduced motion it is simply there.