Bar Chart

A composable bar chart built with SVG and D3 scales.

radius

vertical grid

showGrid

#Installation

bunx --bun bun add @barefootjs/chart

#Usage

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        <Bar39          dataKey="desktop"40          fill="var(--color-desktop)"41          radius={4}42        />43      </BarChart>44    </ChartContainer>45  )46}

#Examples

#Basic

1"use client"23import type { ChartConfig } from "@barefootjs/chart"45const chartConfig: ChartConfig = {6  desktop: { label: "Desktop", color: "hsl(221 83% 53%)" },7}89const chartData = [10  { month: "January", desktop: 186 },11  { month: "February", desktop: 305 },12  { month: "March", desktop: 237 },13  { month: "April", desktop: 73 },14  { month: "May", desktop: 209 },15  { month: "June", desktop: 214 },16]1718export function BarChartBasicDemo() {19  return (20    <ChartContainer config={chartConfig} className="w-full">21      <BarChart data={chartData}>22        <CartesianGrid vertical={false} />23        <XAxis24          dataKey="month"25          tickFormatter={(v: string) => v.slice(0, 3)}26        />27        <YAxis />28        <Bar29          dataKey="desktop"30          fill="var(--color-desktop)"31          radius={4}32        />33      </BarChart>34    </ChartContainer>35  )36}

#Multiple

Desktop

Mobile

1"use client"23import type { ChartConfig } from "@barefootjs/chart"45const chartConfig: ChartConfig = {6  desktop: { label: "Desktop", color: "hsl(221 83% 53%)" },7  mobile: { label: "Mobile", color: "hsl(280 65% 60%)" },8}910const chartData = [11  { month: "January", desktop: 186, mobile: 80 },12  { month: "February", desktop: 305, mobile: 200 },13  // ...14]1516export function BarChartMultipleDemo() {17  return (18    <ChartContainer config={chartConfig} className="w-full">19      <BarChart data={chartData}>20        <CartesianGrid vertical={false} />21        <XAxis22          dataKey="month"23          tickFormatter={(v: string) => v.slice(0, 3)}24        />25        <YAxis />26        <ChartTooltip />27        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />28        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />29      </BarChart>30    </ChartContainer>31  )32}

#Interactive

Show:

1"use client"23import { createSignal } from "@barefootjs/dom"4import type { ChartConfig } from "@barefootjs/chart"56const chartConfig: ChartConfig = {7  desktop: { label: "Desktop", color: "hsl(221 83% 53%)" },8  mobile: { label: "Mobile", color: "hsl(280 65% 60%)" },9}1011export function BarChartInteractiveDemo() {12  const [category, setCategory] =13    createSignal<"desktop" | "mobile">("desktop")1415  return (16    <div>17      <div className="flex gap-2 mb-4">18        <button onClick={() => setCategory("desktop")}>19          Desktop20        </button>21        <button onClick={() => setCategory("mobile")}>22          Mobile23        </button>24      </div>25      <ChartContainer config={chartConfig} className="w-full">26        <BarChart data={chartData}>27          <CartesianGrid vertical={false} />28          <XAxis29            dataKey="month"30            tickFormatter={(v: string) => v.slice(0, 3)}31          />32          <YAxis />33          <ChartTooltip />34          <Bar35            dataKey={category()}36            fill={\`var(--color-\${category()})\`}37            radius={4}38          />39        </BarChart>40      </ChartContainer>41    </div>42  )43}

#API Reference

BarChart

Prop	Type	Default	Description
data	Record<string, unknown>[]	-	Array of data objects. Each object represents one group on the X axis.

ChartContainer

Prop	Type	Default	Description
config	ChartConfig	-	Maps each data key to a label and color. Sets CSS variables for theming.
className	string	-	Additional CSS class names for the container element.

Bar

Prop	Type	Default	Description
dataKey	string	-	The key in the data objects to use for bar values.
fill	string	currentColor	Fill color for the bars. Supports CSS variables like var(--color-desktop).
radius	number	0	Border radius for rounded bar corners.

XAxis

Prop	Type	Default	Description
dataKey	string	-	The key in the data objects to use for X axis labels.
tickFormatter	(value: string) => string	-	Custom formatter for tick labels.
hide	boolean	false	Hide the X axis.

YAxis

Prop	Type	Default	Description
tickFormatter	(value: number) => string	-	Custom formatter for tick labels.
hide	boolean	false	Hide the Y axis.

CartesianGrid

Prop	Type	Default	Description
vertical	boolean	true	Show vertical grid lines.
horizontal	boolean	true	Show horizontal grid lines.

ChartTooltip

Prop	Type	Default	Description
labelFormatter	(label: string) => string	-	Custom formatter for the tooltip label.