Line Chart

LineChart

Line chart built on top of AreaChart with the area fill removed. Supports single series, grouped multi-series, and all AreaChart features (interpolation, points, markers, brush, zoom).

Import

import { LineChart, LineSeries } from 'reaviz';

LineChart Props

Same as AreaChart — LineChart is an AreaChart with <LineSeries /> as the default series.

LineSeries Props

Same as AreaSeries — LineSeries is an AreaSeries with area={null} and line={<Line strokeWidth={3} />}.

Basic Usage

Single Series

const data = [
  { key: new Date('2024-01-01'), data: 10 },
  { key: new Date('2024-02-01'), data: 25 },
  { key: new Date('2024-03-01'), data: 18 },
];

<LineChart
  width={350}
  height={250}
  data={data}
/>

Multi-Series (Grouped)

const data = [
  { key: new Date('2024-01-01'), data: [
    { key: 'Series A', data: 10 },
    { key: 'Series B', data: 15 },
  ]},
  { key: new Date('2024-02-01'), data: [
    { key: 'Series A', data: 25 },
    { key: 'Series B', data: 20 },
  ]},
];

<LineChart
  width={550}
  height={250}
  data={data}
  series={<LineSeries type="grouped" colorScheme="cybertron" />}
/>

Customization

Custom Stroke Width

import { Line } from 'reaviz';

<LineChart
  data={data}
  series={<LineSeries line={<Line strokeWidth={4} />} />}
/>

Smooth Interpolation

<LineChart
  data={data}
  series={<LineSeries interpolation="smooth" />}
/>

Always Show Points

import { PointSeries } from 'reaviz';

<LineChart
  data={data}
  series={<LineSeries symbols={<PointSeries show={true} />} />}
/>

Point Visibility Options

// Show on hover (default)
<LineSeries symbols={<PointSeries show="hover" />} />

// Show first point only
<LineSeries symbols={<PointSeries show="first" />} />

// Show last point only
<LineSeries symbols={<PointSeries show="last" />} />

// No points
<LineSeries symbols={null} />

Value Markers (Reference Lines)

import { LinearValueMarker } from 'reaviz';

<LineChart
  data={data}
  series={
    <LineSeries
      type="grouped"
      colorScheme="cybertron"
      valueMarkers={[
        <LinearValueMarker value={12} color="#D740BE" />,
        <LinearValueMarker value={6} color="#F8A340" />,
      ]}
    />
  }
/>

Custom Gridlines

import { GridlineSeries, Gridline } from 'reaviz';

<LineChart
  data={data}
  gridlines={<GridlineSeries line={<Gridline direction="all" />} />}
/>

Line with Gradient

import { Line, Gradient } from 'reaviz';

<LineChart
  data={data}
  series={
    <LineSeries line={<Line gradient={<Gradient />} />} />
  }
/>

Line with Glow

<LineChart
  data={data}
  series={
    <LineSeries
      line={<Line glow={{ color: '#2196F3', blur: 10 }} />}
    />
  }
/>

No Gridlines

<LineChart data={data} gridlines={null} />

Notes

• LineChart is a thin wrapper around AreaChart — it sets area={null} and a default strokeWidth={3} line
• All AreaChart features work: brush, zoom/pan, secondary axes, stacked types
• For an area + line combo, use AreaChart directly instead of LineChart
• Interpolation types: 'linear' | 'smooth' | 'step' | 'monotone' | 'natural' | 'basis' | 'cardinal'