About
An accessible SVG chart (ported from elastic-ui's Vue component by Jose Estevez, MIT) that draws a line, grouped bars over categories, or loose points for one or more data series, with linear or log axes, a hover/keyboard-driven value readout, a legend for multiple series, and a screen-reader-only data table.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Chart to your project and fits it to your theme.
Code
How Chart is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import Chart from "@/components/ui/chart";
const RESPONSE = [
{
name: "Median response",
points: [
{ x: 1, y: 120 },
{ x: 2, y: 128 },
{ x: 4, y: 141 },
{ x: 8, y: 167 },
{ x: 16, y: 230 },
{ x: 32, y: 410 },
{ x: 64, y: 905, label: "Pool exhausted" },
],
},
];
export default function ChartDemo() {
return (
<Chart
series={RESPONSE}
variant="line"
className="max-w-2xl"
label="Median response time against concurrent users: it doubles past 16, and jumps once the pool runs out at 64"
x={{ title: "Concurrent users", scale: "log" }}
y={{ title: "Response", unit: "ms" }}
/>
);
}
More by joseestevez520
View all
Marquee
Day Strip
Prose
File Drop Zone