A powerful chart library built on top of the Flitter framework that provides a headless way to define and compose charts. Unlike traditional chart libraries where you are constrained by predefined components, headless-chart gives you building blocks that you can shape and style to meet your exact needs.
- Full Control: Instead of tweaking chart options, you directly modify widget structures using Flitter's widget system
- Framework Agnostic: Works seamlessly with vanilla JavaScript/TypeScript or any UI framework
- Flexible Rendering: Supports both SVG and Canvas rendering out of the box
- React Integration: Easy integration with React through
@meursyphus/flitter-react
# Create a new Vite project npm create vite@latest my-chart-app -- --template react cd my-chart-app # Install dependencies npm install @meursyphus/flitter @meursyphus/headless-chart @meursyphus/flitter-react
import ReactWidget from "@meursyphus/flitter-react"; import { BarChart } from "@meursyphus/headless-chart"; export default function App() { const chart = BarChart({ data: { labels: ["January", "February", "March"], datasets: [ { legend: "Sales", values: [150, 200, 170] } ], title: "Monthly Sales" } }); return ( <ReactWidget width="600px" height="400px" widget={chart} renderer="svg" /> ); }
import { BarChart } from "@meursyphus/headless-chart"; import { Text, Container, BoxDecoration } from "@meursyphus/flitter"; const customConfig = { bar: ({ value, label, legend }) => { return Container({ width: 20, height: value * 2, decoration: new BoxDecoration({ color: legend === "Sales" ? "blue" : "gray" }), child: Text(`${value}`, { style: { fill: "white" } }) }); }, title: ({ name }) => { return Text(name, { style: { fontSize: 18, fontWeight: "bold" } }); } }; const chart = BarChart({ data: { title: "Customized Sales Chart", labels: ["Jan", "Feb", "Mar"], datasets: [ { legend: "Sales", values: [150, 200, 170] } ] }, custom: customConfig });
Visit our documentation to learn more about:
- Detailed installation guides
- Framework integrations
- Chart customization
- Advanced examples
Check out our interactive examples to see what you can build with headless-chart.
MIT