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 TERMS = [
{
name: "First term",
points: [
{ x: "Java", y: 6.8 },
{ x: "SQL", y: 7.4 },
{ x: "Web", y: 6.1 },
{ x: "Systems", y: 5.6 },
],
},
{
name: "Second term",
points: [
{ x: "Java", y: 7.3 },
{ x: "SQL", y: 7.2 },
{ x: "Web", y: 7.0 },
{ x: "Systems", y: 6.2 },
],
},
];
export default function ChartGroupedBarsDemo() {
return (
<Chart
series={TERMS}
variant="bars"
className="max-w-2xl"
label="Average mark by subject in each term: every subject but SQL went up"
y={{ title: "Average mark", min: 0, max: 10 }}
/>
);
}
More by joseestevez520
View all
Marquee
Day Strip
Prose
File Drop Zone