Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts

This tutorial will explain how to create pie, ring, and bubble charts using Chart.js. Previously, we have learned four chart types of Chart.js: line chart and bar chart (tutorial 2), as well as radar chart and polar region chart (tutorial 3).

Create pie and ring charts

Pie charts and ring charts are ideal for showing the proportions of a whole that is divided into different parts. For example, a pie chart can be used to show the percentage of male lions, female lions and young lions in a safari, or the percentage of votes that different candidates receive in the election.

Pie charts are only suitable for comparing single parameters or datasets. It should be noted that the pie chart cannot draw entities with zero value because the angle of the fan in the pie chart depends on the numerical size of the data point. This means that any entity with a proportion of zero will not be displayed on the chart. Similarly, negative values ​​cannot be drawn on pie charts.

In Chart.js, you can create a pie chart by setting type key to pie , and a ring chart by setting type key to doughnut . Here is an example of creating both 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 showing oil export data (unit: billion US dollars) for the top five oil exporters in 2015.

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

You can use different keys to control the display of the above chart, such as cutout , which can be a number or a string. If specified as a number, the value is considered a pixel value; if specified as a string ending in % , the value is considered a percentage of the total radius. You can use rotation key to specify the starting angle of the chart. Similarly, you can also use circumference key to specify the angle at which the chart scans when plotting the data. Both angles are expressed in degrees rather than radians.

Two different animations can be activated when drawing a chart. You can use the animateRotate key to specify whether the chart should have a rotation animation. Similarly, you can also use the animateScale key to specify whether the ring graph should be scaled from the center. The value of animateRotate is true by default, and the value of animateScale is false by default.

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

The following is the code to create a ring graph for the above data. Set the value of rotation to -90 Set the start point to rotate 90 degrees counterclockwise.

 var oilData = {
  labels: ["Saudi Arabia", "Russia", "Iraq", "UAE", "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: "Major oil exporters in 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
}); 

Create a bubble chart

Bubble charts are used to draw or display three dimensions of data on a chart ( p1 , p2 , p3 ). The position and size of the bubble 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 ).

It should be noted that the size of the third data point is not represented by the radius of the bubbles, but by their area. The area of ​​the circle is proportional to the square of the radius. This means you have to make sure that the bubble radius you are drawing is proportional to the square root of the size of the third data point.

In Chart.js, you can create a bubble chart by setting the value of type key to bubble . Here is an example of how to create a bubble chart:

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

Let's use bubble charts to draw the weight of different items in the room. The data of the chart needs to be passed in the object format. The data object needs to have the following interface to draw correctly.

 {
    x:<number> ,
    y:<number> ,
    r:<number>
}</number></number></number>

An important difference between a bubble chart and all other charts is that the bubble radius does not scale with the chart.

For example, the width of a bar in a bar chart increases or decreases according to the size of the chart. This won't happen with the bubble chart. The radius of the bubble is always equal to the exact number of pixels you specify. This makes sense because in this chart type, the radius is actually used to represent the real data.

Let's create a bubble chart to plot the number of deer herds at different locations in the forest.

 var popData = {
  datasets: [
    {
      label: ["Deer Herd"],
      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 number, the number of deer at (80, 80) is 36 times the number of deer at (0, 100).

Like all other chart types, you can use backgroundColor , borderColor , and borderWidth keys to control the background color, border color, and border width of the drawn points. Similarly, you can also use hoverBackgroundColor , hoverBorderColor , and hoverBorderWidth keys to specify the hover background color, hover border color, and hover border width.

You can also use hoverRadius key to specify the extra radius to add to different bubbles when hovering. Remember that this radius will be added to the original value to draw the hovering bubble. If the radius of the original bubble is 10 and hoverRadius is set to 5, the radius of the bubble on hover will be equal to 15.

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

var chartOptions = {
  plugins: {
    title: {
      display: true,
      position: "bottom",
      text: "Number of animals in different hot spots",
      font: {
        size: 20
      }
    },
    legend: {
      position: "bottom",
      align: "center"
    }
  },
  layout: {
    padding: 20
  }
};

The above parameters will create the following bubble chart.

Summarize

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

The above is the detailed content of Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts. For more information, please follow other related articles on the PHP Chinese website!