Area Chart

A composable area chart built with SVG, D3 scales, and d3-shape.

fillOpacity

0.1

0.2

0.4

0.6

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  AreaChart,7  Area,8  AreaCartesianGrid,9  AreaXAxis,10  AreaYAxis,11  AreaChartTooltip,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 MyAreaChart() {28  return (29    <ChartContainer config={chartConfig} className="w-full">30      <AreaChart data={chartData}>31        <AreaCartesianGrid vertical={false} />32        <AreaXAxis33          dataKey="month"34          tickFormatter={(v: string) => v.slice(0, 3)}35        />36        <AreaYAxis />37        <AreaChartTooltip />38        <Area39          dataKey="desktop"40          fill="var(--color-desktop)"41          stroke="var(--color-desktop)"42        />43      </AreaChart>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 AreaChartBasicDemo() {19  return (20    <ChartContainer config={chartConfig} className="w-full">21      <AreaChart data={chartData}>22        <AreaCartesianGrid vertical={false} />23        <AreaXAxis24          dataKey="month"25          tickFormatter={(v: string) => v.slice(0, 3)}26        />27        <AreaYAxis />28        <Area29          dataKey="desktop"30          fill="var(--color-desktop)"31          stroke="var(--color-desktop)"32        />33      </AreaChart>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 AreaChartMultipleDemo() {17  return (18    <ChartContainer config={chartConfig} className="w-full">19      <AreaChart data={chartData}>20        <AreaCartesianGrid vertical={false} />21        <AreaXAxis22          dataKey="month"23          tickFormatter={(v: string) => v.slice(0, 3)}24        />25        <AreaYAxis />26        <AreaChartTooltip />27        <Area dataKey="desktop" fill="var(--color-desktop)" stroke="var(--color-desktop)" />28        <Area dataKey="mobile" fill="var(--color-mobile)" stroke="var(--color-mobile)" />29      </AreaChart>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 AreaChartInteractiveDemo() {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        <AreaChart data={chartData}>27          <AreaCartesianGrid vertical={false} />28          <AreaXAxis29            dataKey="month"30            tickFormatter={(v: string) => v.slice(0, 3)}31          />32          <AreaYAxis />33          <AreaChartTooltip />34          <Area35            dataKey={category()}36            fill={\`var(--color-\${category()})\`}37            stroke={\`var(--color-\${category()})\`}38          />39        </AreaChart>40      </ChartContainer>41    </div>42  )43}

#API Reference

AreaChart

Prop	Type	Default	Description
data	Record<string, unknown>[]	-	Array of data objects. Each object represents one point 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.

Area

Prop	Type	Default	Description
dataKey	string	-	The key in the data objects to use for area values.
fill	string	currentColor	Fill color for the area. Supports CSS variables like var(--color-desktop).
stroke	string	fill value	Stroke color for the area line.
fillOpacity	number	0.2	Opacity of the filled area (0–1).

AreaXAxis

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.

AreaYAxis

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

AreaCartesianGrid

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

AreaChartTooltip

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