Changing the circumference

Pie and doughnut charts don't have to be complete circles. You can set the value of the circumference property (in radians) and use less than 360 degrees (2 * Math.PI radians). Using Math.PI as the circumference, you get a half-pie or half-doughnut chart. These charts are good to compare two or three values and may fit better in reduced spaces.

We modified the previous chart in the following example. It compares the 2017 populations of China and India with the rest of the world using a half-doughnut. The following fragment contains the relevant code. You can see the full code in Pie/pie-9-halfpie.html:

 const numberOfEntries = 2;
// ...
const chartObj = {
type: "doughnut",
data: dataObj,
options: {
circumference: Math.PI, // creates the half-pie
rotation: Math.PI / 2, // rotates the half-pie 180 degrees
title: {...},
legend: {...},
pieceLabel: {...}
}
};
new Chart("my-pie-chart", chartObj);

The resulting chart is shown as follows. The rotation property doesn't contain the amount of rotation, but a position (that is, the starting angle from where the arcs are drawn), and the default rotation position is -Math.PI/2, so the value of Math.PI/2 actually rotates it 180 degrees, not 90 degrees, as it might seem (for that, use Math.PI to move it to a perpendicular position):

Changing the circumference and rotation properties of a doughnut chart (code: Pie/pie-9-halfpie.html)
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.119.112.7