Chart

const data = [
  { month: "Jan", desktop: 186, mobile: 80 },
  { month: "Feb", desktop: 305, mobile: 200 },
  { month: "Mar", desktop: 237, mobile: 120 },
  { month: "Apr", desktop: 173, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "Jun", desktop: 214, mobile: 140 },
];

<BarChart
  data={data}
  categoryKey="month"
  series={[
    { key: "desktop", label: "Desktop" },
    { key: "mobile", label: "Mobile" },
  ]}
  height={220}
  class="w-full max-w-lg"
/>

A set of composable chart components (bar, line, area, pie, …) with tooltips and legends.

Installation

railbase ui add chart

Peer dependencies:

npm install @preact/signals

Usage

import { ChartContainer, BarChart } from "@/lib/ui/chart";

<ChartContainer config={config} class="h-64">
  <BarChart data={data} />
</ChartContainer>

Anatomy

Exported parts: chartFiltersSignal · addChartFilter · removeChartFilter · toggleChartFilter · clearChartFilters · isChartFilterActive · applyChartFilters · ChartTooltip · ChartTooltipContent · ChartLegend · ChartLegendContent · ChartStyle · BarChart · LineChart · AreaChart · PieChart · DonutChart · ScatterChart · RadarChart · RadialBarChart · Treemap · FunnelChart · ComposedChart · ChartContainer · ChartFilterBar