AreaChart

@coinbase/cds-web-visualization@3.7.0

A chart component that displays data as filled areas beneath lines. Ideal for showing cumulative values, stacked data, or emphasizing volume over time.

import { AreaChart } from '@coinbase/cds-web-visualization'

󰒨

Source

󰏖

Storybook

󰏖

View as Markdown

---

Peer dependencies

• framer-motion: ^10.18.0

---

Related components

• CartesianChart,
• ReferenceLine,
• Scrubber,
• XAxis,
• YAxis

AreaChart is a wrapper for CartesianChart that has some unique features over LineChart, such as the ability to stack areas on top of each other and a default value-axis minimum that follows the baseline (0 when baseline is not set). Charts are built using SVGs.

Basics

The only prop required is series, which takes an array of series objects. Each series object needs an id and a data array of numbers.

Loading...

󰙡

Live Code

<AreaChart
  height={{ base: 150, tablet: 200, desktop: 250 }}
  inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
  series={[
    {
      id: 'prices',
      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 2, 68, 20, 21, 58],
    },
  ]}
  type="gradient"
  showLines
  showYAxis
  yAxis={{
    showGrid: true,
    width: 32,
  }}
/>

Data

Positive and Negative

Area grows from the baseline to each value, allowing for both positive and negative data to be shown. Also, you can set baseline to any value you'd like.

Loading...

󰙡

Live Code

<AreaChart
  height={{ base: 150, tablet: 200, desktop: 250 }}
  inset={0}
  series={[
    {
      id: 'area',
      data: [-40, -28, -21, -5, 48, -5, -28, 2, -29, -48, 18, -30, -29, 8],
      gradient: {
        stops: [
          { offset: 0, color: 'var(--color-fgNegative)' },
          { offset: 0, color: 'var(--color-fgPositive)' },
        ],
      },
    },
  ]}
  type="dotted"
  showLines
  showYAxis
  yAxis={{
    showGrid: true,
  }}
/>

Range

You can pass in [min, max] tuples as data points to render an area that span a range of values.

Loading...

󰙡

Live Code

<AreaChart
  legend={<Legend seriesIds={['marketCap']} />}
  showXAxis
  showYAxis
  height={250}
  series={[
    {
      id: 'marketCap',
      label: 'Market Cap',
      data: [5.4, 5.8, 6.1, 5.9, 6.0, 6.3],
      showLines: true,
      fillOpacity: 0,
    },
    {
      id: 'confidenceInterval',
      label: 'Confidence Interval',
      data: [
        [5.3, 5.5],
        [5.6, 6.0],
        [5.8, 6.2],
        [5.8, 6.1],
        [5.9, 6.3],
        [6.2, 6.5],
      ],
      fillOpacity: 0.3,
    },
  ]}
  xAxis={{
    showLine: true,
    showTickMarks: true,
    data: ['January', 'February', 'March', 'April', 'May', 'June'],
  }}
  yAxis={{
    showGrid: true,
    showLine: true,
    showTickMarks: true,
    domain: { min: 5.0, max: 7.0 },
    tickLabelFormatter: (val) => `$${val}B`,
  }}
>
  <Line seriesId="marketCap" />
</AreaChart>

Stacking

You can use the stacked prop to stack all areas on top of each other. You can also use the stackId prop on a series to create different stack groups. See CartesianChart for more info on stacking.

Loading...

󰙡

Live Code

<AreaChart
  showLines
  stacked
  curve="natural"
  legend
  height={{ base: 150, tablet: 200, desktop: 250 }}
  inset={{ top: 0, bottom: 8, left: 0, right: 0 }}
  series={[
    {
      id: 'currentRewards',
      data: [
        100, 150, 200, 280, 380, 500, 650, 820, 1020, 1250, 1510, 1800, 2120, 2470, 2850, 3260,
        3700, 4170,
      ],
      color: 'var(--color-fg)',
      legendShape: 'squircle',
      label: 'Current Rewards',
    },
    {
      id: 'potentialRewards',
      data: [
        150, 220, 300, 400, 520, 660, 820, 1000, 1200, 1420, 1660, 1920, 2200, 2500, 2820, 3160,
        3520, 3900,
      ],
      color: 'var(--color-fgPositive)',
      LineComponent: (props) => <DottedLine {...props} strokeDasharray="6 6" />,
      legendShape: 'squircle',
      label: 'Potential Rewards',
    },
  ]}
  AreaComponent={(props) => <DottedArea {...props} peakOpacity={0.4} baselineOpacity={0.4} />}
  type="dotted"
/>

Styling

Areas

You can have different area styles for each series.

Loading...

󰙡

Live Code

<AreaChart
  height={{ base: 150, tablet: 200, desktop: 250 }}
  inset={0}
  series={[
    {
      id: 'visitors',
      data: [450, 520, 480, 600, 750, 680, 590],
      label: 'Weekly Visitors',
      color: '#fb4d3d',
      type: 'dotted',
    },
    {
      id: 'repeatVisitors',
      data: [250, 200, 150, 140, 100, 80, 50],
      label: 'Weekly Repeat Visitors',
      color: '#16a34a',
    },
    {
      id: 'signups',
      data: [45, 62, 55, 250, 380, 400, 450],
      label: 'Weekly Signups',
      color: '#2563eb',
      type: 'gradient',
    },
  ]}
/>

Axes

Using showXAxis and showYAxis allows you to display the axes. For more information, such as adjusting domain and range, see XAxis and YAxis.

Loading...

󰙡

Live Code

<AreaChart
  showLines
  showXAxis
  showYAxis
  height={{ base: 200, tablet: 225, desktop: 250 }}
  series={[
    {
      id: 'prices',
      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
    },
  ]}
  xAxis={{
    showGrid: true,
    showLine: true,
    showTickMarks: true,
    tickLabelFormatter: (dataX) => `Day ${dataX}`,
  }}
  yAxis={{
    showGrid: true,
    showLine: true,
    showTickMarks: true,
  }}
  fillOpacity={0.5}
/>

Gradient

You can build threshold-based gradients with hard transitions by reusing stop offsets.

Loading...

󰙡

Live Code

<AreaChart
  showLines
  showYAxis
  height={{ base: 180, tablet: 220, desktop: 260 }}
  series={[
    {
      id: 'netFlow',
      label: 'Net Flow',
      data: [-9, -7, -3, -1, 2, 5, 3, -2, 1, 6, 8, 4],
      gradient: {
        stops: ({ min, max }) => [
          { offset: min, color: 'var(--color-fgNegative)', opacity: 0.45 },
          { offset: -2, color: 'var(--color-fgNegative)', opacity: 0.45 },
          { offset: -2, color: 'var(--color-fgWarning)', opacity: 0.45 },
          { offset: 2, color: 'var(--color-fgWarning)', opacity: 0.45 },
          { offset: 2, color: 'var(--color-fgPositive)', opacity: 0.45 },
          { offset: max, color: 'var(--color-fgPositive)', opacity: 0.45 },
        ],
      },
      type: 'gradient',
    },
  ]}
  yAxis={{
    showGrid: true,
    domain: { min: -10, max: 10 },
    tickLabelFormatter: (value) => `${value}%`,
  }}
/>

Composed Examples

Custom Baseline

You can combine a custom baseline with a scrubber label that shows both price and date.

Loading...

󰙡

Live Code

function CustomBaseline() {
  const candles = [...btcCandles].reverse().slice(0, 180);
  const prices = candles.map((candle) => parseFloat(candle.close));
  const dates = candles.map((candle) => new Date(parseInt(candle.start, 10) * 1000));

  const startingPrice = prices[0];

  const formatPrice = useCallback((price) => {
    return `$${price.toLocaleString('en-US', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    })}`;
  }, []);

  const formatDate = useCallback((date) => {
    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
  }, []);

  const formatLabel = useCallback(
    (dataIndex) => {
      const price = prices[dataIndex];
      const date = dates[dataIndex];

      return (
        <>
          <tspan style={{ fontWeight: 'bold' }}>{formatPrice(price)}</tspan> {formatDate(date)}
        </>
      );
    },
    [dates, formatDate, formatPrice, prices],
  );

  const PriceLabel = memo((props) => (
    <DefaultReferenceLineLabel
      {...props}
      background="var(--color-bgSecondary)"
      borderRadius={12.5}
      color="var(--color-fg)"
      dx={12}
      font="label1"
      horizontalAlignment="left"
      inset={{ top: 4, bottom: 4, left: 8, right: 8 }}
    />
  ));

  const chartAccessibilityLabel = `Bitcoin area chart with custom baseline. Current price: ${formatPrice(
    prices[prices.length - 1],
  )}. Use arrow keys to navigate.`;

  const getScrubberAccessibilityLabel = useCallback(
    (index) => `${formatPrice(prices[index])} ${formatDate(dates[index])}`,
    [dates, formatDate, formatPrice, prices],
  );

  return (
    <AreaChart
      enableScrubbing
      showLines
      showYAxis
      accessibilityLabel={chartAccessibilityLabel}
      getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
      fillOpacity={0.5}
      height={300}
      series={[
        {
          id: 'prices',
          data: prices,
          gradient: {
            stops: [
              { offset: startingPrice, color: 'var(--color-fgNegative)' },
              { offset: startingPrice, color: 'var(--color-fgPositive)' },
            ],
          },
        },
      ]}
      yAxis={{
        baseline: startingPrice,
        showGrid: true,
        tickLabelFormatter: formatPrice,
        domain: { min: 70000, max: 120000 },
        width: 80,
        ticks: [80000, 100000, 120000],
      }}
    >
      <Scrubber label={formatLabel} labelElevated />
      <ReferenceLine
        LabelComponent={PriceLabel}
        LineComponent={(props) => (
          <DottedLine {...props} stroke="var(--color-fg)" strokeDasharray="0 16" strokeWidth={3} />
        )}
        dataY={startingPrice}
        label={formatPrice(startingPrice)}
      />
    </AreaChart>
  );
}