Line Chart

A composable line chart built with SVG, D3 scales, and D3 shape.

strokeWidth

type

monotone

linear

dots

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  LineChart,7  Line,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 MyLineChart() {28  return (29    <ChartContainer config={chartConfig} className="w-full">30      <LineChart data={chartData}>31        <CartesianGrid vertical={false} />32        <XAxis33          dataKey="month"34          tickFormatter={(v: string) => v.slice(0, 3)}35        />36        <YAxis />37        <ChartTooltip />38        <Line39          dataKey="desktop"40          stroke="var(--color-desktop)"41          type="monotone"42        />43      </LineChart>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 LineChartBasicDemo() {19  return (20    <ChartContainer config={chartConfig} className="w-full">21      <LineChart data={chartData}>22        <CartesianGrid vertical={false} />23        <XAxis24          dataKey="month"25          tickFormatter={(v: string) => v.slice(0, 3)}26        />27        <YAxis />28        <Line29          dataKey="desktop"30          stroke="var(--color-desktop)"31          type="monotone"32        />33      </LineChart>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 LineChartMultipleDemo() {17  return (18    <ChartContainer config={chartConfig} className="w-full">19      <LineChart data={chartData}>20        <CartesianGrid vertical={false} />21        <XAxis22          dataKey="month"23          tickFormatter={(v: string) => v.slice(0, 3)}24        />25        <YAxis />26        <ChartTooltip />27        <Line dataKey="desktop" stroke="var(--color-desktop)" type="monotone" />28        <Line dataKey="mobile" stroke="var(--color-mobile)" type="monotone" />29      </LineChart>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 LineChartInteractiveDemo() {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        <LineChart data={chartData}>27          <CartesianGrid vertical={false} />28          <XAxis29            dataKey="month"30            tickFormatter={(v: string) => v.slice(0, 3)}31          />32          <YAxis />33          <ChartTooltip />34          <Line35            dataKey={category()}36            stroke={\`var(--color-\${category()})\`}37            type="monotone"38          />39        </LineChart>40      </ChartContainer>41    </div>42  )43}

#API Reference

LineChart

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.

Line

Prop	Type	Default	Description
dataKey	string	-	The key in the data objects to use for line values.
stroke	string	currentColor	Stroke color for the line. Supports CSS variables like var(--color-desktop).
strokeWidth	number	2	Width of the line stroke in pixels.
type	"linear" \| "monotone"	monotone	Curve interpolation type. "monotone" for smooth curves, "linear" for straight segments.
dot	boolean	true	Whether to show dots at data points.

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.