Bubble charts are just like scatter charts, but they can display an extra variable in the diameter of the point (or shape). The type property should be bubble. Although they share the same dataset properties as scatter charts, most of them can receive callbacks in bubble charts, which allow a higher degree of interactivity. The data structure for bubble charts contains three properties, as follows:

{x: number, y: number, r: number}

The properties x and y are scaled automatically when the chart is scaled. The r property is the raw radius of the circle in pixels and is not scaled (but you can configure a callback if you need to scale it).

The following code (ScatterBubble/bubble-1.html) creates a simple bubble chart with a single dataset containing five entries. The color of each bubble is generated automatically according to the radius of the bubble using a callback:

const dataObj = {
     datasets: [
         {
             data: [{x:5, y:1, r:60},{x:3, y:1, r:30},{x:1, y:2, r:15},
                    {x:3, y:5, r:90},{x:2, y:4, r:20}],
             backgroundColor: function(context) {
                 const point = context.dataset.data[context.dataIndex];
                 return 'hsla('+(point.r * 4)+',100%,70%,.6)'
             }
         }
     ]
 }
 
 const chartObj = { type: "bubble", data: dataObj,
     options: {
         scales: {
             xAxes: [{ticks: {min: 0, max: 6}}],
             yAxes: [{ticks: {min: 0, max: 7}}]
         },
     }
 };
 new Chart("my-bubble-chart", chartObj);

The result is shown as follows. Note that if you resize the chart, the bubble sizes don't change:

Bubble charts are as not as informative as scatter charts when displaying large amounts of data, but they can still reveal interesting information. The following example converts the previously shown scatter chart into a bubble chart using the population of each location to generate the radius of the bubble.

Since bubbles may overlap, the dataset is sorted so that the smaller populations stay on top. The scaleR() function creates a simple scale to convert populations into circle radii, as follows:

fetch('../Data/cities15000.csv')
         .then(response => response.text())
         .then(csv => {
             const data = Papa.parse(csv, {header: true}).data;
             drawData(data.sort((a, b) =>  b.population - a.population));
          });
 
 function scaleR(value) {
     const r = Math.floor(value / 100000);
     return r != 0 ? r/10 : .25;
 }

The drawData() function creates a data point object for the bubble chart, with three properties x, y containing the longitudes and latitudes, and the scaled population converted into a radius, as follows:

function drawData(datasets) {
     const coordset = [];
     datasets.forEach(city => {
         const obj = {
             x: city.longitude,
             y: city.latitude,
             r: scaleR(city.population)
         };
         coordset.push(obj);
     });

The data object includes the data array as its data, and configures the backgroundColor 
property as a callback that returns different colors for the bubbles depending on the value of the radius, as follows:

     const dataObj = {
         datasets: [
             {
                 label: "Label",
                 data: coordset,
                 backgroundColor: function(context) {
                     const value =     
                     context.dataset.data[context.dataIndex].r;
                     if(value > 20) return 'hsla(0,100%,50%,.4)';
                     if(value > 10) return 'hsla(30,100%,50%,.5)';
                     if(value > 5) return 'hsla(60,100%,50%,.6)';
                     if(value > 1) return 'hsla(120,100%,50%,.7)';
                     else return 'hsla(0,0%,50%,1)';
                 }
             }
         ]
     }
 
     new Chart("my-bubble-chart", {type: 'bubble', data: dataObj, options: {...});
 }

 You can see the full code in ScatterBubble/bubble-2.html. The result is shown as follows: