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 GRADES = [
{
name: "Students",
points: [
{ x: "Fail", y: 3 },
{ x: "Pass", y: 9 },
{ x: "Good", y: 11 },
{ x: "Very good", y: 6 },
{ x: "Excellent", y: 2 },
],
},
];
export default function ChartBarsDemo() {
return (
<Chart
series={GRADES}
variant="bars"
className="max-w-2xl"
label="Students by final grade: most passed or did well, two were excellent"
y={{ title: "Students" }}
/>
);
}
More by joseestevez520
View all
Marquee
Day Strip
Prose
File Drop Zone