Area chart

An area chart shows data as an area under a line intersecting dots. It can display either multiple measures as different areas or a single measure split by one attribute into multiple areas with points intersecting attribute values. Use it to show how parts add up to a whole over time, for example, the market share of several companies in an industry.

Areas stack by default. Alternatively, the areas can overlap if { stackMeasures: false } is set in the chart config.

Buckets

Sorting

AreaChart applies no default sorting. To sort the data, pass sort items in the sortBy prop. To sort the viewBy values by the total of the stacked areas, use an attribute area sort (newAttributeAreaSort) on the viewBy attribute. See Sort items.

Configuration

Pass these options in the config prop. See Chart configuration for details.

Limits

• An area chart renders up to 10,000 areas and up to 10,000 viewBy values. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.
• A measure shown as a percentage (computeRatio) stays a percentage only when the chart uses a single measure. With more measures, the chart shows raw values. See Show a measure as a percentage.

Structure

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { AreaChart } from "@gooddata/sdk-ui-charts";

<AreaChart
    measures={<measures>}
    config={<chart-config>}
    …
/>

Example

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { AreaChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./catalog.js";

const style = { height: 300 };

<div style={style}>
    <AreaChart
        measures={[Md.$FranchiseFees]}
        viewBy={Md.DateMonth.Short}
    />
</div>

Props