Bar chart

A bar chart shows data in horizontal bars. Bar charts can display one or multiple measures side by side divided by attribute values or a single measure stacked by attribute values. Use it to compare values across categories, for example, sales by product.

Buckets

Sorting

BarChart applies no default sorting. To sort the data, pass sort items in the sortBy prop. To sort stacked bars 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 bar 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 bar 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 { BarChart } from "@gooddata/sdk-ui-charts";

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

Example

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

const style = { height: 300 };

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

Props