Line Chart

Playground

Installation

pnpm add @tessinaui/ui recharts

Usage

import { LineChart } from "@tessinaui/ui";
import type { ChartConfig } from "@tessinaui/ui";

const config: ChartConfig = {
  revenue: { label: "Revenue", color: "var(--chart-1)" },
  expenses: { label: "Expenses", color: "var(--chart-3)" },
};

const data = [
  { month: "Jan", revenue: 4200, expenses: 2400 },
  { month: "Feb", revenue: 3800, expenses: 2210 },
  { month: "Mar", revenue: 5100, expenses: 2290 },
];

<LineChart
  data={data}
  config={config}
  categoryKey="month"
  dashedSeries={["expenses"]}
/>

Examples

Default

A smooth, single-series line with a natural curve.

Multiple

Two series in brand tones; expenses dashed so it stays distinct without color.

Curve

The four interpolation modes — monotone, natural, linear, and step.

Sizes

Three aspect ratios — sm (short/wide), md, and lg (tall).

Dots & labels

Point markers on every value, or the value printed above each point.

States

Loading skeleton and empty state.

Non-color differentiation

Colour alone is unreliable for colour-vision-deficient readers. LineChart ships two encodings you can layer on top of colour:

• Point markers (showDots, on by default) give each line a distinct dotted trail.
• Dashed strokes (dashedSeries={["expenses"]}) render specific series with a dash pattern.

Combine them with the legend and tooltip so a series can always be identified without colour.

Theming

Accessibility

• accessibilityLayer on: keyboard navigation across data points + screen-reader summary.
• Animation respects prefers-reduced-motion: reduce.
• Pair colour with markers / dashes / direct labels for colour-independent reading.

Core props