You have learned about four different chart types in Chart.js up to this point. The second tutorial of the series covered line and bar charts. The third tutorial discussed radar and polar area charts. In this tutorial, you will learn how to use Chart.js to create pie, doughnut, and bubble charts.

Creating Pie and Doughnut Charts

Pie and doughnut charts are useful when you want to show the proportion in which something is divided among different entities. For example, you can use pie charts to show the percentage of males, females, and young ones of lions in a wildlife park, or the percentage of votes that different candidates got in an election.

Pie charts are only helpful when you want to compare one specific parameter or set of data. An important thing to keep in mind is that you cannot use pie charts to plot entities whose values are zero because the angle of the sectors in a pie chart depends on the magnitude of the data points. This means that any entity whose share is zero won't be shown on the chart at all. Similarly, you cannot plot negative values on a pie chart.

You can create pie charts in Chart.js by setting the type key to pie. Similarly, you can create doughnut charts by setting the type key to doughnut. Here is an example of creating these two charts:

var pieChart = new Chart(votesCanvas, {
    type: 'pie',
    data: votesData,
    options: chartOptions
});

var doughnutChart = new Chart(votesCanvas, {
    type: 'doughnut',
    data: votesData,
    options: chartOptions
});

Let's create a pie chart which shows the oil export data of the top five countries in 2015. The data is in US billion dollars.

var data = {
    labels: [
        "Saudi Arabia",
        "Russia",
        "Iraq",
        "United Arab Emirates",
        "Canada"
    ],
    datasets: [
        {
            data: [133.3, 86.2, 52.2, 51.2, 50.2],
            backgroundColor: [
                "#FF6384",
                "#63FF84",
                "#84FF63",
                "#8463FF",
                "#6384FF"
            ]
        }]
};

You can control the appearance of the above chart using different keys like cutout, which can either be a number or a string. When specified as a number, the value is assumed to be in pixels. When specified as a string that ends with %, the value is assumed to be a percentage of the total radius. You can specify the start angle of the chart using the rotation key. Similarly, you can also specify the angle that the chart sweeps while plotting the data using the circumference key. Both these angles are specified in degrees instead of radians.

There are two different animations that can be activated while drawing a chart. You can specify if the chart should have a rotation animation using the animateRotate key. Similarly, you can also specify if the doughnut chart should be scaled from the center using the animateScale key. The value of animateRotate is set to true by default, and the value for animateScale is set to false by default.

As usual, you can control the background color, border color, and border width of all the data points using the backgroundColor, borderColor, and borderWidth keys respectively. Similarly, the hover values of all these properties can be controlled using the hoverBackgroundColor, hoverBorderColor, and hoverBorderWidth keys.

Here is the code to create a doughnut chart for the above data. Setting the value for rotation equal to -90 takes that starting point 90 degrees anti-clockwise.

var oilData = {
  labels: ["Saudi Arabia", "Russia", "Iraq", "United Arab Emirates", "Canada"],
  datasets: [
    {
      data: [133.3, 86.2, 52.2, 51.2, 50.2],
      backgroundColor: ["#FF6384", "#63FF84", "#84FF63", "#8463FF", "#6384FF"],
      borderColor: "black",
      borderWidth: 2
    }
  ]
};

var chartOptions = {
  rotation: -90,
  cutout: "45%",
  plugins: {
    title: {
      display: true,
      position: "bottom",
      text: "Top Oil Exporters (2015)",
      font: {
        size: 32
      }
    },
    legend: {
      position: "left",
      align: "start"
    }
  },
  animation: {
    animateRotate: false,
    animateScale: true
  }
};

var donutChart = new Chart(oilCanvas, {
  type: "doughnut",
  data: oilData,
  options: chartOptions
});

Creating Bubble Charts

Bubble charts are used to plot or display three dimensions (p1, p2, p3) of data on a chart. The position and size of the bubbles determine the values of these three data points. The horizontal axis represents the first data point (p1), the vertical axis represents the second data point (p2), and the area of the bubble is used to represent the value of the third data point (p3).

One thing that you should keep in mind is that the magnitude of the third data point is not represented by the radius of the bubbles but by their area. Now, the area of a circle is proportional to the square of the radius. This means that you have to make sure that the radius of the bubble that you plot is proportional to the square root of the magnitude of the third data point.

You can create bubble charts in Chart.js by setting the value of the type key to bubble. Here is an example of creating a bubble chart.

var bubbleChart = new Chart(popCanvas, {
    type: 'bubble',
    data: popData,
    options: chartOptions
});

Let's plot the weight of different items kept in a room using a bubble chart. The data for the chart needs to be passed in the form of an object. The data object needs to have the following interface for it to be plotted properly.

{
    x: <Number>,
    y: <Number>,
    r: <Number>
}

One important difference between bubble charts and all other charts is that the bubble radius is not scaled with the chart.

For example, the width of bars in a bar chart can increase or decrease based on the chart size. The same thing does not happen with bubble charts. The radius of the bubbles is always equal to the exact number of pixels that you specified. It makes sense because in this chart type, the radius is actually being used to represent real data.

Let's create a bubble chart to plot the population of deer at different spots in a forest.

var popData = {
  datasets: [
    {
      label: ["Deer Population"],
      data: [
        { x: 100, y: 0, r: 10 },
        { x: 60, y: 30, r: 20 },
        { x: 40, y: 60, r: 25 },
        { x: 80, y: 80, r: 30 },
        { x: 20, y: 30, r: 25 },
        { x: 0, y: 100, r: 5 }
      ],
      backgroundColor: "#FF9966"
    }
  ]
};

Since the radius here is proportional to the square root of the actual magnitude, the number of deer at (80, 80) is 36 times more than the number of deer at (0, 100).

Just like all other chart types, you can control the background color, border color, and border width of plotted points using the backgroundColor, borderColor, and borderWidth keys. Similarly, you can also specify the hover background color, hover border color, and hover border width using the hoverBackgroundColor, hoverBorderColor, and hoverBorderWidth keys.

You can also specify the additional radius that you want to add to different bubbles on hover using the hoverRadius key. Remember that this radius is added to the original value to draw the hovered bubble. If the original bubble had a radius of 10 and hoverRadius is set to 5, the radius of the bubble on hover will be equal to 15.

var popData = {
  datasets: [
    {
      label: ["Deer Population"],
      data: [
        { x: 100, y: 0, r: 10 },
        { x: 60, y: 30, r: 20 },
        { x: 40, y: 60, r: 25 }
      ],
      backgroundColor: "#9966FF",
      hoverBackgroundColor: "#FFFFFF",
      hoverBorderColor: "#9966FF",
      hoverBorderWidth: 5,
      hoverRadius: 5
    },
    {
      label: ["Giraffe Population"],
      data: [
        { x: 80, y: 80, r: 30 },
        { x: 20, y: 30, r: 25 },
        { x: 0, y: 100, r: 5 }
      ],
      backgroundColor: "#FF6600",
      hoverBackgroundColor: "#FFFFFF",
      hoverBorderColor: "#FF6600",
      hoverBorderWidth: 5,
      hoverRadius: 5
    }
  ]
};

var chartOptions = {
  plugins: {
    title: {
      display: true,
      position: "bottom",
      text: "Animal Population at Different Hotspots",
      font: {
        size: 20
      }
    },
    legend: {
      position: "bottom",
      align: "center"
    }
  },
  layout: {
    padding: 20
  }
};

The above parameters will create the following bubble chart.

Final Thoughts

In this tutorial, you learned about three more chart types available in Chart.js. You should now be able to choose the appropriate chart type to plot your data and set specific values for different keys to control their appearance. In the next tutorial, you will learn how to manipulate the scales for different chart types.