AreaChart | Coinbase Design System

AreaChart

@coinbase/cds-web@9.0.2

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/visualizations/chart'

Source

Storybook

View as Markdown

Peer dependencies

framer-motion: ^10.18.0

Related components

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.

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.

Range

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

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.

Styling

Areas

You can have different area styles for each series.

Axes

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

Gradient

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

Composed Examples

Custom Baseline

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

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>
  );
}

Basics​

Data​

Positive and Negative​

Range​

Stacking​

Styling​

Areas​

Axes​

Gradient​

Composed Examples​

Custom Baseline​

Is this page useful?