Highcharts Bubble Charts

Highcharts Bubble Chart

In this chapter, we will introduce Highcharts' bubble charts.

We have already covered Highcharts configuration syntax in previous chapters. Next, let's look at other Highcharts configurations.

Configuration

chart Configuration

Configure the chart's type as 'bubble'. The chart.type describes the chart type. The default value is "line".

The chart.zoomType property configures chart zooming. You can zoom by dragging the mouse along the x-axis or y-axis. It can be set to: 'x', 'y', or 'xy'.

var chart = {
    type: 'bubble',
    zoomType: 'xy'
};

Example

Filename: highcharts_bubble_basic.htm

<html>
<head>
    <meta charset="UTF-8" />
    <title>Highcharts Tutorial |  ()</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
    <script language="JavaScript">
        $(document).ready(function() {
            var chart = {
                type: 'bubble',
                zoomType: 'xy'
            };
            var title = {
                text: 'Highcharts Bubbles'
            };
            var series = [{
                data: [
                    [97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56],
                    [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40],
                    [38, 23, 33], [57, 86, 31]
                ]
            }, {
                data: [
                    [25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93],
                    [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56],
                    [15, 67, 48], [54, 25, 81]
                ]
            }, {
                data: [
                    [47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60],
                    [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75],
                    [64, 12, 10], [30, 77, 82]
                ]
            }];
            var json = {};
            json.chart = chart;
            json.title = title;
            json.series = series;
            $('#container').highcharts(json);
        });
    </script>
</body>
</html>

The output of the above example is:

3D Bubble Chart

series.marker

Set the series.marker gradient to give it a 3D effect.

marker: {
    fillColor: {
        radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
        stops: [
            [0, 'rgba(255,255,255,0.5)'],
            [1, Highcharts.Color(Highcharts.getOptions().colors).setOpacity(0.5).get('rgba')]
        ]
    }
}

Example

Filename: highcharts_bubble_3d.htm

<html>
<head>
    <title>Highcharts Tutorial |  ()</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="/try/demo_source/highcharts.js"></script>
    <script src="http://code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
    <script language="JavaScript">
        $(document).ready(function() {
            var chart = {
                type: 'bubble',
                plotBorderWidth: 1,
                zoomType: 'xy'
            };
            var title = {
                text: 'Highcharts bubbles with radial gradient fill'
            };
            var xAxis = {
                gridLineWidth: 1
            };
            var yAxis = {
                startOnTick: false,
                endOnTick: false
            };
            var series = [{
                data: [
                    [9, 81, 63], [98, 5, 89], [51, 50, 73], [41, 22, 14],
                    [58, 24, 20], [78, 37, 34], [55, 56, 53], [18, 45, 70],
                    [42, 44, 28], [3, 52, 59], [31, 18, 97], [79, 91, 63],
                    [93, 23, 23], [44, 83, 22]
                ],
                marker: {
                    fillColor: {
                        radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                        stops: [
                            [0, 'rgba(255,255,255,0.5)'],
                            [1, Highcharts.Color(Highcharts.getOptions().colors).setOpacity(0.5).get('rgba')]
                        ]
                    }
                }
            }, {
                data: [
                    [42, 38, 20], [6, 18, 1], [1, 93, 55], [57, 2, 90],
                    [80, 76, 22], [11, 74, 96], [88, 56, 10], [30, 47, 49],
                    [57, 62, 98], [4, 16, 16], [46, 10, 11], [22, 87, 89],
                    [57, 91, 82], [45, 15, 98]
                ],
                marker: {
                    fillColor: {
                        radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                        stops: [
                            [0, 'rgba(255,255,255,0.5)'],
                            [1, Highcharts.Color(Highcharts.getOptions().colors).setOpacity(0.5).get('rgba')]
                        ]
                    }
                }
            }];
            var json = {};
            json.chart = chart;
            json.title = title;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.series = series;
            $('#container').highcharts(json);
        });
    </script>
</body>
</html>

The output of the above example is:

YouTip