Introduction
SVG chart primitives for BarefootJS — composable JSX components with signal-driven reactivity and D3 scales under the hood.
#Overview
@barefootjs/chart ships six chart types built from small, composable JSX primitives — ChartContainer, XAxis, Bar, Line, and so on. Charts render as SVG, react to signals without re-rendering the whole tree, and use D3 scales internally — so you keep the layout control of D3 with the ergonomics of components.
- Six chart types: bar, line, area, pie, radar, and radial
- Signal-reactive:
dataKey,fill, and other props update granularly - SVG-based: scalable, theme-aware, and CSS-styleable via custom properties
- Composable: drop in
ChartTooltip,CartesianGrid, and axes only when you need them - Themed via
ChartConfig: per-series labels and colors expressed as CSS variables
#Chart Types
Six chart types are available out of the box. Click through to each page for full props, examples, and a live playground.
Monthly Visitors
January - June 2024
Bar Chart
Categorical comparison with grouped or single series bars.
Monthly Visitors
January - June 2024
Line Chart
Time series and trends with optional dots and smoothing.
Monthly Visitors
January - June 2024
Area Chart
Stacked or single-series filled regions over a baseline.
Task Status
Current Sprint
Pie Chart
Part-to-whole composition; supports donuts via inner radius.
Monthly Visitors
January - June 2024
Radar Chart
Multi-axis comparison across shared categorical dimensions.
Browser Visitors
January - June 2024
Radial Chart
Polar bars and progress arcs (full or half-circle).
#Installation
bunx --bun bun add @barefootjs/chart#Quick Start
A minimal bar chart: declare a ChartConfig, hand data to <BarChart>, and compose the axes, grid, and tooltip you want.
Monthly Visitors
January - June 2024
1"use client"23import type { ChartConfig } from "@barefootjs/chart"4import {5 ChartContainer,6 BarChart,7 Bar,8 CartesianGrid,9 XAxis,10 YAxis,11 ChartTooltip,12} from "@/components/ui/chart"1314const chartConfig: ChartConfig = {15 desktop: { label: "Desktop", color: "hsl(221 83% 53%)" },16}1718const chartData = [19 { month: "January", desktop: 186 },20 { month: "February", desktop: 305 },21 { month: "March", desktop: 237 },22 { month: "April", desktop: 73 },23 { month: "May", desktop: 209 },24 { month: "June", desktop: 214 },25]2627export function MyBarChart() {28 return (29 <ChartContainer config={chartConfig} className="w-full">30 <BarChart data={chartData}>31 <CartesianGrid vertical={false} />32 <XAxis33 dataKey="month"34 tickFormatter={(v: string) => v.slice(0, 3)}35 />36 <YAxis />37 <ChartTooltip />38 <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />39 </BarChart>40 </ChartContainer>41 )42}#Next Steps
- Bar Chart — Categorical comparison with grouped or single series bars.
- Line Chart — Time series and trends with optional dots and smoothing.
- Area Chart — Stacked or single-series filled regions over a baseline.
- Pie Chart — Part-to-whole composition; supports donuts via inner radius.
- Radar Chart — Multi-axis comparison across shared categorical dimensions.
- Radial Chart — Polar bars and progress arcs (full or half-circle).