Combo chart

A combo chart combines two types of visualizations, for example, a column chart and a line chart.

A combo chart can have one or two axes. If a combo chart has two axes, it is often referred to as a dual axis chart.

By default, a combo chart is displayed as a combination of a column chart and a line chart, with the secondary axis enabled (you can disable it).

Buckets

Sorting

ComboChart applies no default sorting. To sort the data, pass sort items in the sortBy prop. See Sort items.

Configuration

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

Customize the type of a combo chart

A combo chart combines any two of the following chart types:

• Column chart
• Line chart
• Area chart

To change the chart type for primary measures, set the config.primaryChartType property.

To change the chart type for secondary measures, set the config.secondaryChartType property.

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

<ComboChart
    primaryMeasures={<primaryMeasures>}
    secondaryMeasures={<secondaryMeasures>}
    config={{
        primaryChartType: "column", // string
        secondaryChartType: "area" // string
    }}
    viewBy={<attribute>}
/>

Disable the secondary axis

To disable the secondary axis, set the config.dualAxis property to false.

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

<ComboChart
    primaryMeasures={<primaryMeasures>}
    secondaryMeasures={<secondaryMeasures>}
    config={{
        dualAxis: false // boolean
    }}
    viewBy={<attribute>}
/>

Limits

• A combo chart renders up to 10,000 measures and up to 10,000 viewBy values. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.
• If all measures are on the primary Y axis and any of them is a line, the chart doesn’t stack to 100%, even with stackMeasuresToPercent: true.
• A measure shown as a percentage (computeRatio) stays a percentage only when it’s the only measure in primaryMeasures or in secondaryMeasures. With dualAxis: false, it must be the only measure in the chart. Otherwise, the chart shows raw values. See Show a measure as a percentage.

Structure

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

<ComboChart
    primaryMeasures={<primaryMeasures>}
    secondaryMeasures={<secondaryMeasures>}
    config={<chart-config>}
    …
/>

Example

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

const style = { height: 300 };

<div style={style}>
    <ComboChart
        primaryMeasures={Md.$FranchiseFeesInitialFranchiseFee}
        secondaryMeasures={Md.$FranchiseFeesAdRoyalty}
        viewBy={Md.LocationResort}
    />
</div>

Props