All Components

Bubble

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

They 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.

Bubble Charts are useful for visualizing different scientific relationships such as economic or social relations. 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 a best practice to plot positive values.

Basic Usage

The following example demonstrates the Bubble Chart in action.

import { Component } from '@angular/core';
import { PlotBand } from '@progress/kendo-angular-charts';
import { jobsData } from './jobs-data';

@Component({
    selector: 'my-app',
    template: `
      <kendo-chart>
        <kendo-chart-series>
          <kendo-chart-title text="Job Growth"></kendo-chart-title>
          <kendo-chart-series-item type="bubble" [data]="data"
                                   xField="x" yField="y" sizeField="size" categoryField="category">
          </kendo-chart-series-item>
          <kendo-chart-x-axis>
            <kendo-chart-x-axis-item [axisCrossingValue]="-5000" [majorUnit]="2000" [plotBands]="xPlotBands">
                <kendo-chart-x-axis-item-labels format="{0:N0}" [skip]="1" rotation="auto">
                </kendo-chart-x-axis-item-labels>
            </kendo-chart-x-axis-item>
          </kendo-chart-x-axis>
          <kendo-chart-y-axis>
            <kendo-chart-y-axis-item [labels]="{ format: '{0:N0}' }">
            </kendo-chart-y-axis-item>
          </kendo-chart-y-axis>
          <kendo-chart-tooltip format="{3}: {2:N0} applications" [opacity]="1">
          </kendo-chart-tooltip>
          <kendo-chart-legend [visible]="false">
          </kendo-chart-legend>
        </kendo-chart-series>
      </kendo-chart>
    `
})
export class AppComponent {
    public data: any[] = jobsData;
    public xPlotBands: PlotBand[] = [{
        from: -5000,
        to: 0,
        color: "#00f",
        opacity: 0.05
    }];
}
export const jobsData = [{
    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"
}];
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article