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 USERS = [
{ name: "Singleton", points: [1, 2, 4, 8, 16, 32].map((x) => ({ x, y: 1 })) },
{
name: "Prototype",
points: [1, 2, 4, 8, 16, 32].map((x) => ({
x,
y: x,
label: x === 32 ? "32 objects" : undefined,
})),
},
{
name: "Pool of 8",
points: [1, 2, 4, 8, 16, 32].map((x) => ({ x, y: Math.min(x, 8) })),
},
];
export default function ChartSeveralSeriesDemo() {
return (
<Chart
series={USERS}
variant="line"
className="max-w-2xl"
label="Objects created against requests: a singleton stays at one, a prototype grows with every request, a pool stops at eight"
x={{ title: "Requests" }}
y={{ title: "Objects in memory" }}
/>
);
}
More by joseestevez520
View all
Marquee
Day Strip
Prose
File Drop Zone