Charts

Line Chart

Line and area variants. Multi-series with hover tooltips and animated mount. Built with D3 scales and Catmull-Rom smooth curves.

Revenue

Usage

import { LineChart, formatCurrency } from 'foundry-charts'

<LineChart
  data={[
    { month: 'Jan', revenue: 42000 },
    { month: 'Feb', revenue: 55000 },
    // ...
  ]}
  series={[{ key: 'revenue', label: 'Revenue' }]}
  xKey="month"
  variant="line"
  formatY={formatCurrency}
/>

Props

Prop	Type	Default	Description
`data`	`LineChartDatum[]`	`—`	Array of data objects. Each object represents one x-axis point.
`series`	`SeriesConfig[]`	`—`	Which keys to plot. Each entry has key, label, and optional color.
`xKey`	`string`	`—`	The key in each datum that provides the x-axis label.
`variant`	`'line' \| 'area'`	`'line'`	Line only, or line with gradient fill below it.
`curve`	`'smooth' \| 'linear'`	`'smooth'`	Catmull-Rom smooth curves or straight line segments.
`height`	`number`	`320`	Chart height in pixels. Width is always 100% of the container.
`formatY`	`(v: number) => string`	`formatValue`	Formatter for y-axis ticks and tooltip values.
`formatX`	`(v: string) => string`	`—`	Optional formatter for x-axis tick labels.
`className`	`string`	`—`	Additional CSS class on the root element.
`style`	`CSSProperties`	`—`	Inline styles on the root element.