Sample Bubble Chart in Chart Js

How to draw a bubble chart in chart.js

Chart.js is the most popular javascript based charting library used to draw various types of charts easily including basic bar charts, stacked bar charts, pie charts, doughnut charts, bubble charts, mixed charts and so on.

The chart.js library is popular because of its simplicity and ease of use. You do not need to be a master of javascript to use chart.js and you can easily insert charts drawn with the help of chart.js into any cms supporting html.

Another key reason behind the popularity of chart.js is that you can easily configure the various chart types. Chart.js is highly flexible which means you can configure charts according to your need easily and assign them various colors as well as change other configurations. There are lots of customization options included with chart.js which allow you to draw awesome charts of various types.

With chart.js, you can also plot three dimensional data into a bubble chart. The first two dimensions correspond to the bubble ‘s position relative to the x and y axes whereas the third dimension corresponds to the size of the bubble.

In this post, we will show you how to create a bubble chart with the help of chart.js javascript charting library.

Install chart.js

Before we can start drawing charts using the chart.js charting library, we will need to install it. There are two main methods to install chart.js and the recommended method is to use the cdn link. You can grab the cdn link to install the latest version from the chartjs.org website.

To install chart.js using the cdn link, add the following script to the head of the website.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js" integrity="sha512-L0Shl7nXXzIlBSUUPpxrokqq4ojqgZFQczTYlGjzONGTDAcLremjwaWv5A+EDLnxhQzY5xUZPWLOLqYRkY0Cbw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

This will install chart.js version 4.4.1 on your website. If you do not want to add the script to your website head, you can also install chart.js using npm. SSH to your server and run the following command to install chart.js on your server.

npm install chart.js

Create bubble charts with chart.js

Here, we will create a sample bubble chart using chart.js

We will first need to create the canvas to hold the chart.

<div>
  <canvas id="myChart"></canvas>
</div>

Following that, we can add the rest of the script to draw the bubble chart. We will use bubble as chart type to draw the bubble chart.

<div>
  <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('myChart');
  new Chart(ctx, {
    type: 'bubble',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: 'Colors',
        data: [
                  { x: 20,
                     y: 21,
                     r: 20
                  },
                  {
                     x: 25,
                     y: 25,
                     r: 25
                  },
                  {
                     x: 13,
                     y: 11,
                     r: 25
                  },
                  {
                     x: 40,
                     y: 18,
                     r: 25
                  },
                  {
                     x: 31,
                     y: 28,
                     r: 25
                  },
                  {
                     x: 27,
                     y: 35,
                     r: 35
                  }
],
backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
               borderColor: ['black'],
               radius: 8,
        borderWidth: 1,
      }]
    },
    options: {
      scales: {
        y: {
          responsive: false,
        }
      }
    }
  });
</script>

The above script will output a chart that looks like the following: