AreaChart

Area chart with gradient fill, line, and data points. Supports single series, grouped multi-series, stacked, and stacked-normalized variants.

Import

import {
  AreaChart,
  AreaSeries,
  Area,
  Line,
  PointSeries,
  StackedAreaChart,
  StackedAreaSeries,
  StackedNormalizedAreaChart,
  StackedNormalizedAreaSeries
} from 'reaviz';

AreaChart Props

AreaSeries Props

Area Props

Line Props

PointSeries Props

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 },
];

<AreaChart
  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 },
  ]},
];

<AreaChart
  width={550}
  height={350}
  data={data}
  series={<AreaSeries type="grouped" colorScheme="cybertron" />}
/>

Stacked

<StackedAreaChart
  width={550}
  height={350}
  data={multiSeriesData}
  series={<StackedAreaSeries colorScheme="cybertron" />}
/>

Stacked Normalized (Percentage)

<StackedNormalizedAreaChart
  width={550}
  height={350}
  data={multiSeriesData}
  series={<StackedNormalizedAreaSeries colorScheme="cybertron" />}
/>

Customization

Smooth Interpolation

<AreaChart
  data={data}
  series={<AreaSeries interpolation="smooth" />}
/>

Custom Gradient

import { Area, Gradient, GradientStop } from 'reaviz';

<AreaChart
  data={data}
  series={
    <AreaSeries
      area={
        <Area
          gradient={
            <Gradient
              stops={[
                <GradientStop offset="0%" stopOpacity={0.2} />,
                <GradientStop offset="50%" stopOpacity={1} />,
              ]}
            />
          }
        />
      }
    />
  }
/>

Pattern Mask

import { Area, Stripes } from 'reaviz';

<AreaChart
  data={data}
  series={
    <AreaSeries area={<Area mask={<Stripes />} />} />
  }
/>

Value Markers (Reference Lines)

import { LinearValueMarker } from 'reaviz';

<AreaChart
  data={data}
  series={
    <AreaSeries
      type="grouped"
      valueMarkers={[
        <LinearValueMarker value={12} color="#D740BE" />,
        <LinearValueMarker value={6} color="#F8A340" />,
      ]}
    />
  }
/>

Point Visibility

// Always visible
<AreaSeries symbols={<PointSeries show={true} />} />

// Only on hover (default)
<AreaSeries symbols={<PointSeries show="hover" />} />

// First or last point only
<AreaSeries symbols={<PointSeries show="first" />} />
<AreaSeries symbols={<PointSeries show="last" />} />

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

Line Only (No Fill)

<AreaSeries area={null} />

Area Only (No Line)

<AreaSeries line={null} />

Custom Line Width

<AreaSeries line={<Line strokeWidth={5} />} />

Custom Colors

// Function-based
<AreaSeries colorScheme={(_data, index) => index % 2 ? 'blue' : 'green'} />

Secondary Axis

<AreaChart
  data={data}
  secondaryAxis={[
    <LinearXAxis type="category" position="start" />,
  ]}
/>

Axis Configuration

import { LinearXAxis, LinearYAxis, LinearXAxisTickSeries, LinearYAxisTickSeries } from 'reaviz';

<AreaChart
  data={data}
  xAxis={
    <LinearXAxis
      type="time"
      tickSeries={<LinearXAxisTickSeries label={null} />}
    />
  }
  yAxis={
    <LinearYAxis
      type="value"
      tickSeries={<LinearYAxisTickSeries label={null} />}
    />
  }
/>

No Gridlines

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

Interpolation Types

Variant Components