Column chart

A column chart shows data in vertical columns. Column charts can display one or multiple measures side by side, divided by either attribute values or by a single measure stacked by attribute values. Use it to compare values across categories or over time, for example, revenue by month.

Buckets

Sorting

ColumnChart applies no default sorting. To sort the data, pass sort items in the sortBy prop. To sort stacked columns by their totals, 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

• A column chart renders up to 6,000 data points, counted as the number of viewBy values times the number of series (measures or stackBy values), including empty combinations. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.
• A stacked column chart renders up to 1,000 series: stackBy values, or measures stacked with stackMeasures or stackMeasuresToPercent. With more, the chart shows the same error.
• A measure shown in % (computeRatio) works only when it’s the only measure. With two or more measures, the chart turns computeRatio off on all of them. See Show a measure as a percentage.

Structure

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

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

Example

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

const style = { height: 300 };

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

Props