Bubble chart

A bubble chart shows data as bubbles using Cartesian coordinates. Bubble charts typically have three measures, one for the X axis, one for the Y axis, and one that determines the size of each bubble. The data is sliced by an attribute, with each bubble (an attribute item) noted with a different color. Use a bubble chart to show relationships and patterns among data points, for example, cities positioned by their coordinates, with the bubble size showing each city’s GDP.

Buckets

Sorting

BubbleChart applies no default sorting. You can pass sortBy to sort the data.

Configuration

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

Limits

• A bubble chart renders up to 10,000 bubbles. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.
• A bubble with an empty value in any of its measures isn’t drawn.

Structure

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

<BubbleChart
    xAxisMeasure={<measure>}
    yAxisMeasure={<measure>}
    size={<measure>}
    viewBy={<attribute>}
    config={<chart-config>}
    …
/>

Example

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

import * as Md from "./catalog.js";

const style = { height: 300 };

<div style={style}>
    <BubbleChart
        xAxisMeasure={Md.$FranchiseFees}
        yAxisMeasure={Md.$FranchisedSales}
        size={Md.$AvgDailyTotalSalesByServer}
        viewBy={Md.LocationResort}
    />
</div>

Props