Google Charts
Google Charts Introduction Getting Started Area Charts Bar Charts Bubble Charts Calendar Charts Candlestick Charts Column Charts Combination Chart Gauge Chart Geo Charts Histogram Charts Line Charts Maps Organization Chart Pie Charts Sankey Charts Scatter Charts Stepped Area Charts Table Chart Trendline Charts Wordtree Charts

Google Bubble Chart

Bubble charts are used to draw bubble based charts.

A Bubble chart is rendered within the browser using SVG or VML.

Like all Google charts, bubble charts display tooltips when the user hovers over the data.


Basic Bubble Chart

The following example shows how to draw a basic bubble chart, using google charts API:


Example Explained

First add a <div> element with the id "chart-div" and set width and height:

<!DOCTYPE html> <html lang="en-US"> <body> <div id="chart-div" style="width:100%; height:350px;"></div> </body> </html>

Then add a reference to the Chart API:

<script src="https://www.gstatic.com/charts/loader.js"></script>

Finally add a JavaScript function:

// Load the corechart package and set a callback google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table function drawChart() { // Create the data table var data = google.visualization.arrayToDataTable([ ['ID', 'X', 'Y', 'Temperature'], ['', 80, 167, 120], ['', 79, 136, 130], ['', 78, 184, 50], ['', 72, 278, 230], ['', 81, 200, 180], ['', 72, 170, 100], ['', 68, 477, 80] ]); // Set chart options var options = { title: 'Temperature' }; // Display the chart inside the <div> element with id="chart-div" var chart = new google.visualization.BubbleChart(document.getElementById('chart-div')); chart.draw(data, options); }


Coloring the Bubbles

You can use the colorAxis option to color the bubbles in proportion to a value.

// Set chart options var options = { title: 'Temperature', colorAxis: {colors: ['yellow', 'red']} };
Run code

Adding Labels

You can add labels to your bubbles using IDs.

You can control the bubble typeface, font, and color with the bubble.textStyle option:

var data = google.visualization.arrayToDataTable([ ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], ['CAN', 80.66, 1.67, 'North America', 33739900], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['IND', 68.56, 2.33, 'Asia', 1365137020], ['USA', 78.09, 2.05, 'North America', 307007000] ]); var options = { title: 'Correlation between life expectancy, fertility rate and population', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: {textStyle: {fontSize: 12}} };
Run code