Basic pie chart

A pie chart is a divided into sectors, illustrating numerical proportion. In a pie chart, the arc length of each sector (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented.

Rotated pie chart

By default, pie charts begin with the left edge of the first slice pointing straight up. You can change that with the pieStartAngle option. Here, we rotate the chart clockwise 180 degrees with an option of pieStartAngle: 180. So chosen because that particular angle happens to make the slices reflected.

Basic donut chart

A donut chart is functionally identical to a pie chart, with the exception of a blank center and the ability to support multiple statistics at once. donut charts provide a better data intensity ratio to standard pie charts since the blank center can be used to display additional related data.

Rotated donut chart

By default, donut charts begin with the left edge of the first slice pointing straight up. You can change that with the pieStartAngle option. Here, we rotate the chart clockwise 180 degrees with an option of pieStartAngle: 180. So chosen because that particular angle happens to make the slices reflected.

3D pie charts

A 3D pie chart is used to give the chart a 3D look. Often used for aesthetic reasons, the third dimension does not improve the reading of the data; on the contrary, these plots are difficult to interpret because of the distorted effect of perspective associated with the third dimension. The use of superfluous dimensions not used to display the data of interest is discouraged for charts in general, not only for pie charts.

Exploded pie charts

Example of pie charts withexploded slices. Pie slices can be separated from the rest of the chart with the offset property of the slices option. To separate a slice, create a slices object and assign the appropriate slice number an offset between 0 and 1. Below, we assign progressively larger offsets to slices 4 (Gujarati), 12 (Marathi), 14 (Oriya), and 15 (Punjabi). Examples below display both pie and donut chart versions.

Diff pie charts
Inner circle radius

Example of diff pie chart with radius factor - the relative size of the circles can be controlled with diff.innerCircle.radiusFactor option.

Inner circle transparency

Example of diff pie chart with transparency - the transparency of each data can be controlled with diff.oldData.opacity and diff.newData.opacity.

Inner circle border

Example of diff pie chart with border factor - the border between the two datas can be controlled with diff.innerCircle.borderFactor option.

Inverted difference

Example of diff pie chart with inverted behaviour - the behavior can be inverted so that the oldest data surrounds the newest data with diff.oldData.inCenter option.

Activity
New notifications
James has completed the task Submit documents from Onboarding list
2 hours ago
Margo has added 4 users to Customer enablement channel
3 hours ago
Subscription #466573 from 10.12.2021 has been cancelled. Refund case #4492 created
4 hours ago
Older notifications
Nick requested your feedback and approval in support request #458
3 days ago
Mike added 1 new file(s) to Product management project
new_contract.pdf
112KB
1 day ago
All hands meeting will take place coming Thursday at 13:45.
2 days ago
Christine commented on your community post from 10.12.2021
2 days ago
HR department requested you to complete internal survey by Friday
3 days ago
Loading...
Demo configuration
Color mode
Direction
Layouts
Purchase Limitless