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.

Kendo UI Bubble Charts are well suited for displaying dozens to hundreds of values. They come in handy especially when you wish to visualize size values, differing by several orders of magnitude. As 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.

<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'Job Growth for 2011'"
                 :legend-visible="false"
                 :series-defaults-type="'bubble'"
                 :series="series"
                 :x-axis="xAxis"
                 :y-axis="yAxis"
                 :tooltip="tooltip"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                data: [{
                    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"
                }]
            }],
            xAxis: {
                labels: {
                    format: "{0:N0}",
                    skip: 1,
                    rotation: "auto"
                },
                axisCrossingValue: -5000,
                majorUnit: 2000,
                plotBands: [{
                    from: -5000,
                    to: 0,
                    color: "#00f",
                    opacity: 0.05
                }]
            },
            yAxis: {
                labels: {
                    format: "{0:N0}"
                },
                line: {
                    width: 0
                }
            },
            tooltip: {
                visible: true,
                format: "{3}: {2:N0} applications",
                opacity: 1
            }
        }
    }
})
In this article