Pie charts are perfect for giving the reader a quick understanding of the proportional data distribution. However, there are many ways to get them wrong.
- You have only one data series.
- None of the data values are less than or equal to zero.
- The values have to differ. Small differences in slices are hard to understand, so users won’t be able to see which parts are larger or smaller without a hint. Moreover, having similar-sized categories makes a pie chart look cluttered.
- There’s an adequate small number of slices, e.g. from 6 to 10 categories maximum. As the number of values shown increases, the size of each segment becomes smaller. It makes a chart difficult for the eye to distinguish between the relative sizes of the different sectors.
- You can sort slices by value in clockwise decreasing order starting at 12 o’clock.
- A slice that contains a total amount of some values (commonly named as “other” or “other types”) is usually placed in the end even if it is not the smallest category. This method is to not distract from the individual categories of interest.
Let’s say you have to compare the workload of your development team for the first 5 months of the year. Then you can build a simple pie chart in HTML to see how much (i.e., how many tasks) the team has contributed to the development process as a whole.
Take a look at the pie graph presented below, used to showcase the workload for five months:
This HTML pie chart example gives a quick comparison between the number of completed tasks per month and the activity during the first part of the year. We are able to deduce the following points at a glance: March was the most productive month while the lowest activity level took place in February and May.
A 3D pie chart adds a pinch of aesthetics to the flat 2D graph by making it deeper:
You can separate one or more segments from the circle and create an exploded pie chart. The separated slices look as if they were cut from the pie and moved from its center. This effect is applied to either draw special attention to the slice or to highlight smaller chart categories with minimum values.
Summing up, wherever you can use a pie chart, you might as well create 3 other types described above.
Material Design Styling
Multiple Configuration Options
// scales config
// list of series
series: ["A", "B", "C"],
Advanced Customization Opportunities
dhtmlxChart comes with a broad set of config options that offer complete control over Pie, Pie3D and Donut graphs appearance. The component allows building a chart with monochrome fill or defining a color for each sector, which can be divided by lines with custom colors.
You can connect chart slices with labels by adding lines. Besides, pie and donut charts can display the percentage and values of data items as well as come naked without labels.
Take a look at the screenshot below. We built an interactive dashboard that can be embedded in real-life web applications, for example, CRM systems. Here you can find a customized pie chart in monochrome blue colors with a one-column legend on the right. We also added an area chart, both are in the same style.
Check the full UI Dashboard demo >
Moreover, you are able to tailor all chart elements (including those omitted in config options) to suit your needs by adding new CSS classes.
Pie and donut charts are commonly used to visualize data as a circle sliced into sectors that each represent a percentage of the whole. Despite their benefits, circle graphs are increasingly criticized and overlooked by the web community. We at DHTMLX are aware of how important and sometimes difficult it is to build a clear and intuitive pie chart. So in this article, we tried to bring useful tricks in pie charting.
Being a part of the Suite UI widget library, Chart component helps to build rich web interfaces and applications that are compatible with all modern browsers and popular frameworks including Angular, React, and Vue.js.
Do you have any questions for our team? Feel free to contact us and share your concerns.