Bubble

Bubble Charts are Scatter charts which display data as points with coordinates and sizes that are defined by the value of their items.

Bubble Charts are useful for visualizing different scientific relationships such as economic or social relations because the X-axis of the Bubble Charts is numerical and does not require items. Bubble Charts are also suitable for displaying dozens to hundreds of values, which is convenient for visualizing size values that differ by several orders of magnitude. Because the size value is represented by a circle area, it is recommended to plot positive values.

Bubble Charts are similar to the Scatter Plot and Scatter Line Charts but the data points are replaced with bubbles. This allows a Bubble Chart to display three-dimensional data—two values for the coordinates of the item and one for their size.

Basic Usage

The following example demonstrates the Bubble Chart in action.

import React from 'react';
import ReactDOM from 'react-dom';

import {
  Chart,
  ChartTooltip,
  ChartTitle,
  ChartLegend,
  ChartSeries,
  ChartSeriesItem,
  ChartXAxis,
  ChartXAxisItem,
  ChartYAxis,
  ChartYAxisItem
} from '@progress/kendo-react-charts';

import data from './bubble-data.json';

const xPlotBands = [{
  from: -5000,
  to: 0,
  color: '#00f',
  opacity: 0.05
}];

const ChartContainer = () => (
  <Chart>
    <ChartTitle text="Job Growth" />
    <ChartSeries>
      <ChartSeriesItem
        type="bubble"
        xField="x"
        yField="y"
        sizeField="size"
        categoryField="category"
        data={data}
      />
    </ChartSeries>
    <ChartXAxis>
      <ChartXAxisItem
        axisCrossingValue={-5000}
        majorUnit={2000}
        plotBands={xPlotBands}
        labels={{ format: "{0:N0}", skip: 1, rotation: 'auto' }} />
    </ChartXAxis>
    <ChartYAxis>
      <ChartYAxisItem labels={{ format: '{0:N0}' }} />
    </ChartYAxis>
    <ChartLegend visible={true} />
    <ChartTooltip format="{3}: {2:N0} applications" opacity={1} />
  </Chart>
);

ReactDOM.render(
  <ChartContainer />,
  document.querySelector('my-app')
);
[{
    "x": -2500,
    "y": 50000,
    "size": 500000,
    "category": "Microsoft"
}, {
    "x": 500,
    "y": 110000,
    "size": 7600000,
    "category": "Starbucks"
}, {
    "x": 7000,
    "y": 19000,
    "size": 700000,
    "category": "Google"
}, {
    "x": 1400,
    "y": 150000,
    "size": 700000,
    "category": "Publix Super Markets"
}, {
    "x": 2400,
    "y": 30000,
    "size": 300000,
    "category": "PricewaterhouseCoopers"
}, {
    "x": 2450,
    "y": 34000,
    "size": 90000,
    "category": "Cisco"
}, {
    "x": 2700,
    "y": 34000,
    "size": 400000,
    "category": "Accenture"
}, {
    "x": 2900,
    "y": 40000,
    "size": 450000,
    "category": "Deloitte"
}, {
    "x": 3000,
    "y": 55000,
    "size": 900000,
    "category": "Whole Foods Market"
}]

In this article