LineChart

Feature-rich line chart with dual Y-axis support, multiple curve types, area fills, and interactive legends. Perfect for time series data, metrics dashboards, and analytics.

Playground

Click the legend badges to toggle series visibility. Hover over the chart to see interpolated values. Try different curve types and settings below.

Props

Midnight

curve

glow

OffOn

showDots

OffOn

Code

<LineChart
  data={data}
  theme="midnight"
  curve="linear"
/>

Basic Usage

Import the component and configure your series:

tsx

import { LineChart } from '@derpdaderp/chartkit';

const data = [
  { time: '09:00', p50: 1.5, p95: 2.1, p99: 3.2 },
  { time: '10:00', p50: 1.8, p95: 2.4, p99: 3.8 },
  { time: '11:00', p50: 1.6, p95: 2.2, p99: 3.5 },
  // ...more data points
];

const series = [
  { key: 'p50', label: 'p50', displayValue: '1.8 ms' },
  { key: 'p95', label: 'p95', displayValue: '2.3 ms' },
  { key: 'p99', label: 'p99', displayValue: '3.5 ms' },
];

<LineChart
  data={data}
  series={series}
  theme="midnight"
  unit="ms"
/>

Single Series (Simplified API)

For single-series charts, use dataKey and label instead of the series array:

tsx

<LineChart
  data={data}
  dataKey="value"
  label="Revenue"
  theme="midnight"
  unit="$"
  responsive
/>

Curve Types

Choose from 5 interpolation methods with the curve prop:

curve="linear"

curve="monotone"

curve="step"

curve="stepAfter"

tsx

// Smooth curves (Catmull-Rom spline)
<LineChart data={data} series={series} theme="midnight" curve="monotone" />

// Step function (horizontal then vertical)
<LineChart data={data} series={series} theme="midnight" curve="step" />

Dual Y-Axis

Display series with different scales using yAxisLeft, yAxisRight, and yAxisId per series:

tsx

<LineChart
  data={data}
  series={[
    { key: 'requests', label: 'Requests', yAxisId: 'left' },
    { key: 'latency', label: 'Latency', yAxisId: 'right', strokeDasharray: '5,5' },
  ]}
  yAxisLeft={{ unit: 'req/s' }}
  yAxisRight={{ unit: 'ms' }}
  theme="midnight"
  curve="monotone"
/>

Area Chart

Create beautiful area charts by adding area: true to your series. The gradient automatically fades from the line color to transparent.

tsx

// Simple area chart
<LineChart
  data={data}
  series={[{ key: 'value', label: 'Revenue', area: true }]}
  theme="midnight"
  curve="monotone"
  unit="$"
/>

Customizing Area Opacity

Control the gradient intensity with areaOpacity (default: 0.4 at top, fading to 0.05 at bottom):

tsx

// Multiple areas with different opacities
<LineChart
  data={data}
  series={[
    { key: 'p50', label: 'p50', area: true, areaOpacity: 0.2 },
    { key: 'p95', label: 'p95', area: true, areaOpacity: 0.6 },
  ]}
  theme="midnight"
  curve="monotone"
/>

Data Point Dots

Show dots on data points with showDots:

tsx

<LineChart
  data={data}
  series={[{ key: 'value', label: 'Value' }]}
  theme="midnight"
  showDots
  dotsOnHover={false}  // Always show dots (not just on hover)
  dotSize={4}
/>

Glow Effect

Enable the glow effect for a more dramatic look:

Custom Series Styling

Override colors and stroke styles per series:

tsx

<LineChart
  data={data}
  series={[
    { key: 'actual', label: 'Actual', color: '#22c55e', strokeWidth: 2 },
    { key: 'target', label: 'Target', color: '#f59e0b', strokeDasharray: '8,4' },
    { key: 'forecast', label: 'Forecast', color: '#6b7280', strokeDasharray: '2,2' },
  ]}
  theme="midnight"
  curve="monotone"
/>

Responsive Width

Use the responsive prop to automatically fill the container width:

tsx

<LineChart
  data={data}
  series={series}
  theme="midnight"
  responsive
  height={300}
/>

Props

Prop	Type	Default	Description
`data*`	`T[]`	-	Data array with time and series values
`series`	`SeriesConfig[]`	-	Series configuration (optional if using dataKey)
`dataKey`	`keyof T`	-	Single series data key (simplified API)
`label`	`string`	-	Label for single series (used with dataKey)
`width`	`number`	`600`	Chart width (ignored if responsive=true)
`height`	`number`	`260`	Chart height in pixels
`responsive`	`boolean`	`false`	Auto-fill container width
`theme*`	`ThemeName`	-	Theme name
`timeKey`	`keyof T`	`"time"`	Key for time/x-axis values
`unit`	`string`	`""`	Unit label for left Y-axis (shorthand)
`yAxisLeft`	`YAxisConfig`	-	Left Y-axis configuration
`yAxisRight`	`YAxisConfig`	-	Right Y-axis configuration (enables dual-axis)
`curve`	`CurveType`	`"linear"`	Line interpolation: linear, monotone, step, stepBefore, stepAfter
`showDots`	`boolean`	`false`	Show dots on data points
`dotSize`	`number`	`3`	Dot radius in pixels
`dotsOnHover`	`boolean`	`true`	Show dots only on hover
`glow`	`boolean`	`false`	Enable glow effect on lines
`grid`	`GridOptions \| boolean`	`true`	Grid line configuration
`areaGradient`	`AreaGradientOptions`	-	Customize area gradient: { from, to, direction }
`showLegend`	`boolean`	`true`	Show/hide legend
`annotations`	`Annotation[]`	-	Reference lines and areas
`connectNulls`	`boolean`	`true`	Connect lines through null values
`onDataPointClick`	`function`	-	Click handler for data points
`renderTooltip`	`function`	-	Custom tooltip renderer
`className`	`string`	-	Additional CSS class
`style`	`CSSProperties`	-	Custom styles for container

SeriesConfig

Each series is configured with the following properties:

Prop	Type	Default	Description
`key*`	`string`	-	Unique key matching data property
`label*`	`string`	-	Display label
`displayValue`	`string`	-	Current/summary value shown in legend badge
`yAxisId`	`'left' \| 'right'`	`'left'`	Y-axis assignment for dual-axis charts
`area`	`boolean`	`false`	Fill area under the line (gradient fill)
`areaOpacity`	`number`	`0.4`	Area gradient start opacity (fades to 0.05)
`color`	`string`	-	Custom line color (overrides theme)
`strokeDasharray`	`string`	-	Dash pattern (e.g., "5,5")
`strokeWidth`	`number`	`2`	Line stroke width

YAxisConfig

Configure Y-axis behavior:

Prop	Type	Default	Description
`unit`	`string`	-	Unit label (e.g., "ms", "req/s", "%")
`min`	`number`	-	Minimum value (auto-calculated if not set)
`max`	`number`	-	Maximum value (auto-calculated if not set)
`tickCount`	`number`	`3`	Number of ticks
`format`	`(value: number) => string`	-	Custom tick label formatter

Migration from MonitorLine

MonitorLine has been renamed to LineChart. The API is backward compatible, just update your imports:

tsx

// Before
import { MonitorLine } from '@derpdaderp/chartkit';

// After
import { LineChart } from '@derpdaderp/chartkit';

// MonitorLine is still exported as a deprecated alias