@lilith/ui-charts

Chart and visualization components for React applications. Pure SVG-based charts with no external charting dependencies, featuring theme-aware styling.

Features

• Pure SVG - No external charting libraries required
• Theme-Aware - Automatically adapts to your theme colors
• Responsive - Charts scale to container width
• Multiple Chart Types - Line, Bar, Pie, Area, HeatMap, and Funnel charts
• Customizable - Grid lines, axes, points, curves, and area fills
• Lightweight - Minimal bundle size impact

Installation

npm install @lilith/ui-charts
# or
pnpm add @lilith/ui-charts

Peer Dependencies

npm install react react-dom styled-components

Usage

LineChart

Display time-series or sequential data with optional curves and area fills.

import { LineChart } from '@lilith/ui-charts';
import type { DataPoint } from '@lilith/ui-charts';

const data: DataPoint[] = [
  { x: 0, y: 100, label: 'Jan' },
  { x: 1, y: 150, label: 'Feb' },
  { x: 2, y: 120, label: 'Mar' },
  { x: 3, y: 180, label: 'Apr' },
  { x: 4, y: 200, label: 'May' },
];

<LineChart
  data={data}
  width={600}
  height={300}
  color="#10b981"
  showGrid={true}
  showAxes={true}
  showPoints={true}
  curve={true}
  fillArea={true}
/>

BarChart

Display categorical data with vertical bars.

import { BarChart } from '@lilith/ui-charts';
import type { BarDataPoint } from '@lilith/ui-charts';

const data: BarDataPoint[] = [
  { label: 'Product A', value: 150, color: '#3b82f6' },
  { label: 'Product B', value: 230, color: '#10b981' },
  { label: 'Product C', value: 180, color: '#f59e0b' },
  { label: 'Product D', value: 290, color: '#ef4444' },
];

<BarChart
  data={data}
  width={600}
  height={300}
  showGrid={true}
  showLabels={true}
/>

PieChart

Display proportional data with pie or donut charts.

import { PieChart } from '@lilith/ui-charts';
import type { PieDataPoint } from '@lilith/ui-charts';

const data: PieDataPoint[] = [
  { label: 'Desktop', value: 60, color: '#3b82f6' },
  { label: 'Mobile', value: 30, color: '#10b981' },
  { label: 'Tablet', value: 10, color: '#f59e0b' },
];

// Standard pie chart
<PieChart data={data} size={300} showLabels={true} />

// Donut chart
<PieChart data={data} size={300} innerRadius={0.5} showLabels={true} />

AreaChart

Display stacked or layered data with filled areas.

import { AreaChart } from '@lilith/ui-charts';
import type { AreaDataPoint } from '@lilith/ui-charts';

const data: AreaDataPoint[] = [
  { x: 0, y: 100 },
  { x: 1, y: 150 },
  { x: 2, y: 120 },
  { x: 3, y: 180 },
  { x: 4, y: 200 },
];

<AreaChart
  data={data}
  width={600}
  height={300}
  color="#3b82f6"
  opacity={0.3}
  showGrid={true}
/>

HeatMap

Display matrix data with color-coded cells.

import { HeatMap } from '@lilith/ui-charts';
import type { HeatMapCell } from '@lilith/ui-charts';

const data: HeatMapCell[] = [
  { x: 0, y: 0, value: 10 },
  { x: 1, y: 0, value: 25 },
  { x: 2, y: 0, value: 45 },
  { x: 0, y: 1, value: 30 },
  { x: 1, y: 1, value: 80 },
  { x: 2, y: 1, value: 15 },
];

<HeatMap
  data={data}
  width={400}
  height={200}
  colorScale={['#f0f9ff', '#3b82f6']}
  showValues={true}
/>

FunnelChart

Display conversion funnels or pipeline stages.

import { FunnelChart } from '@lilith/ui-charts';
import type { FunnelStage } from '@lilith/ui-charts';

const data: FunnelStage[] = [
  { label: 'Visitors', value: 10000, color: '#3b82f6' },
  { label: 'Sign Ups', value: 5000, color: '#8b5cf6' },
  { label: 'Trial', value: 2000, color: '#ec4899' },
  { label: 'Paid', value: 500, color: '#10b981' },
];

<FunnelChart
  data={data}
  width={600}
  height={400}
  showLabels={true}
  showValues={true}
/>

API Reference

LineChart

Prop	Type	Default	Description
data	DataPoint[]	required	Array of data points
width	number	600	Chart width in pixels
height	number	300	Chart height in pixels
color	string	theme primary	Line and point color
showGrid	boolean	true	Show grid lines
showAxes	boolean	true	Show X and Y axes
showPoints	boolean	true	Show data points
curve	boolean	false	Use curved lines
fillArea	boolean	false	Fill area under line

BarChart

Prop	Type	Default	Description
data	BarDataPoint[]	required	Array of bar data
width	number	600	Chart width
height	number	300	Chart height
showGrid	boolean	true	Show horizontal grid
showLabels	boolean	true	Show bar labels

PieChart

Prop	Type	Default	Description
data	PieDataPoint[]	required	Array of pie segments
size	number	300	Chart diameter
innerRadius	number	0	Inner radius (0-1) for donut
showLabels	boolean	true	Show segment labels

HeatMap

Prop	Type	Default	Description
data	HeatMapCell[]	required	Array of cell data
width	number	400	Chart width
height	number	200	Chart height
colorScale	[string, string]	theme-based	Min/max colors
showValues	boolean	false	Show cell values

FunnelChart

Prop	Type	Default	Description
data	FunnelStage[]	required	Array of funnel stages
width	number	600	Chart width
height	number	400	Chart height
showLabels	boolean	true	Show stage labels
showValues	boolean	true	Show stage values

Types

interface DataPoint {
  x: number | string | Date;
  y: number;
  label?: string;
}

interface BarDataPoint {
  label: string;
  value: number;
  color?: string;
}

interface PieDataPoint {
  label: string;
  value: number;
  color: string;
}

interface AreaDataPoint {
  x: number;
  y: number;
}

interface HeatMapCell {
  x: number;
  y: number;
  value: number;
}

interface FunnelStage {
  label: string;
  value: number;
  color?: string;
}

Dependencies

• @lilith/ui-primitives - Base components
• @lilith/ui-utils - Chart calculation utilities
• @lilith/ui-theme - Theme tokens

License

MIT