The difference between bubble charts and all the other chart types we have been through is that a bubble chart uses three dimensional data to plot its data point. Hence, instead of providing values for just the x and y axes, we also provide the z axis value as the third variable. Thus, bubble charts can be used for visualizing 3D data where three variables are correlated.

Consider the following example in which we plot a bubble chart to show the correlation between life expectancy, fertility rate, and population of selected countries of the world:

$( '#chart_container' ).highcharts({
  chart: {
    type: 'bubble'
  },
  title: {
    text: 'Life Expectancy, Fertility Rate and Population'
  },
  xAxis: {
    title: {
      text: 'Life Expectancy'
    }
  },
  yAxis: {
    title: {
      text: 'Fertility Rate'
    }
  },
  tooltip: {
    headerFormat: '<b>{point.key}</b><br />',
    pointFormat: 'Life Expectancy: <strong>{point.x} </strong> <br />Fertility Rate: <strong>{point.y} </strong> <br />Population: <strong>{point.z} </strong>'
  },
  series: [{
    name: 'North America',
   data: [
      {name: 'USA', x:78.09, y:2.05, z:307007000}, 
      {name: 'Canada', x:80.66, y:1.67, z:33739900}
    ]
  }, {
    name: 'Europe',
    data: [
      {name: 'Russia', x:68.6, y:1.54, z:141850000}, 
      {name: 'Germany', x:79.84, y:1.36, z:81902307}, 
      {name: 'Great Britain', x:80.05, y:2, z:61801570}, 
      {name: 'Denmark', x:78.6, y:1.84, z:5523095}
    ]
  }, {
    name: 'Middle East',
    data: [
      {name: 'Iraq', x:68.09, y:4.77, z:31090763}, 
      {name: 'Egypt', x:72.73, y:2.78, z:79716203}, 
      {name: 'Iran', x:72.49, y:1.7, z:73137148}
    ]
  }]
});

By setting the chart's type parameter to bubble and providing data points containing life expectancy, fertility rate, and population of the country respectively, we plot the bubble chart showing the correlation between these values.

The preceding code produces the following bubble chart:

We formatted the tooltip using the pointFormat property to properly show the values, as shown in the following screenshot:

In bubble charts, x and y values behave the same as the 2D charts, whereas the third variable (in this case Population) affects the size of the bubble. The bubbles with a higher radius in the previous chart represent a higher population and vice versa.