LineChart

Multi-series trend visualization over time

Overview

LineChart displays data trends over time with support for multiple series, area fills, and interactive tooltips. Built on Recharts with Ditto design system integration.

Features

Multiple series with automatic color assignment
Optional area fill under lines
Curved or linear line interpolation
Interactive tooltips on hover
Customizable grid and legend display
Click handlers for data point interaction

Examples

Basic Line Chart

Simple single-series line chart

Submissions Over Time

Monthly submission counts

Multi-Series

Multiple data series with legend

Activity Trends

Comparing multiple metrics

With Area Fill

Lines with filled area underneath

Engagement Trends

Minimal Style

Minimal display without grid or legend

Simple Trend

Props Reference

Prop	Type	Default	Description
`data`	`LineChartDataPoint[]`	`required`	Array of data points with date and values
`series`	`LineChartSeries[]`	`required`	Series configuration with key, label, and color
`xAxisKey`	`string`	`"date"`	Key for X-axis values in data
`showArea`	`boolean`	`false`	Fill area under lines
`curved`	`boolean`	`true`	Use curved lines instead of straight
`showGrid`	`boolean`	`true`	Show grid lines
`showLegend`	`boolean`	`true`	Show legend below chart
`onPointClick`	`function`	`-`	Click handler for data points

Usage

import { LineChart, ChartCard } from '@/ui/components/charts';

// Basic line chart
<ChartCard title="Submissions Over Time">
  <LineChart
    data={[
      { date: 'Jan', submissions: 45 },
      { date: 'Feb', submissions: 52 },
      { date: 'Mar', submissions: 48 },
    ]}
    series={[{ key: 'submissions', label: 'Submissions' }]}
  />
</ChartCard>

// Multi-series with area fill
<ChartCard title="Activity Trends">
  <LineChart
    data={data}
    series={[
      { key: 'submissions', label: 'Submissions' },
      { key: 'views', label: 'Views' },
    ]}
    showArea
    curved
  />
</ChartCard>