YouTipHighcharts Pie Charts
## Highcharts Pie Charts
Pie charts are highly effective data visualizations used to show proportional relationships among categories. In a pie chart, the arc length of each slice (and consequently its central angle and area) is proportional to the quantity it represents.
Highcharts provides a robust, highly customizable suite of pie chart types to suit various design and data requirements.
---
## Types of Pie Charts
Below is an overview of the different variations of pie charts supported by Highcharts:
| No. | Chart Type | Description |
| :--- | :--- | :--- |
| 1 | (#1-basic-pie-chart) | A standard pie chart showing category proportions. |
| 2 | (#2-pie-chart-with-legends) | A pie chart that includes an interactive legend for toggling categories. |
| 3 | (#3-donut-chart) | A pie chart with a hollow center, often used for multi-level data representation. |
| 4 | (#4-semi-circle-donut-chart) | A clean, space-saving half-donut chart ideal for dashboard key performance indicators (KPIs). |
| 5 | (#5-drilldown-pie-chart) | An interactive chart where clicking a slice reveals a detailed sub-category breakdown. |
| 6 | (#6-gradient-pie-chart) | A pie chart featuring radial gradients on its slices for a modern, 3D-like aesthetic. |
| 7 | (#7-monochrome-pie-chart) | A clean, single-color theme chart using varying shades of one color. |
---
## Configuration and Syntax
To create a pie chart in Highcharts, you need to set the `chart.type` property to `'pie'`.
### Basic Configuration Structure
```javascript
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Browser Market Share, 2023'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Safari',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}]
}]
});
```
---
## Code Examples
### 1. Basic Pie Chart
The standard pie chart displays data slices with automatic color distribution and data labels pointing to each slice.
```javascript
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %'
}
}
}
```
### 2. Pie Chart with Legends
This variation hides individual data labels and instead displays a clean legend at the bottom or side of the chart. Users can click legend items to toggle the visibility of specific slices.
```javascript
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false // Disable labels to use legends instead
},
showInLegend: true // Enable the legend
}
}
```
### 3. Donut Chart
A donut chart is created by configuring the `innerSize` property of the pie series. This carves out the center of the pie.
```javascript
series: [{
name: 'Browsers',
data: browserData,
size: '80%',
innerSize: '60%', // Creates the hollow donut effect
dataLabels: {
enabled: true
}
}]
```
### 4. Semi-Circle Donut Chart
By limiting the start and end angles of the chart, you can create a semi-circle donut chart, which is highly popular for gauge-like visualizations.
```javascript
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
center: ['50%', '75%'], // Adjust center to position the semi-circle
size: '110%'
}
}
```
### 5. Drilldown Pie Chart
Drilldown charts allow users to click on a slice to "zoom in" to a more detailed dataset. This requires importing the `drilldown.js` module.
```javascript
series: [{
name: 'Browsers',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 62.74,
drilldown: 'chrome-details' // Matches the id in the drilldown object
}]
}],
drilldown: {
series: [{
id: 'chrome-details',
data: [
['v112', 0.1],
['v111', 1.2],
['v110', 12.5]
]
}]
}
```
---
## Best Practices and Considerations
1. **Limit Slice Count**: Pie charts are best suited for datasets with 2 to 7 slices. If you have too many categories, the chart becomes cluttered and difficult to read. For larger datasets, consider grouping smaller values into an "Other" category or using a bar chart.
2. **Percentage vs. Absolute Values**: By default, pie charts represent parts of a whole. Ensure your data values sum up to 100% if you are displaying percentages. Use the `tooltip.pointFormat` to clarify whether the values shown are absolute numbers or percentages.
3. **Color Contrast**: Ensure that adjacent slices have distinct colors to maintain readability, especially for colorblind users. Highcharts handles this automatically, but custom color palettes should be chosen carefully.
4. **Donut Charts for Cleanliness**: If you need to display a total value or a central KPI label, use a **Donut Chart** and position HTML text in the center of the hollow circle.