...
Circular Pie Chart
Circular pie charts are the most well-recognized version of this type of diagram. They are commonly used in dashboards.
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
ResultHighchart pieChart(
String title,
String seriesName,
String unit,
List<Map<String, Object>> data
){
return api.buildHighchart( [
chart: [
type: 'pie'
],
title: [
text: title,
],
credits : [enabled: false],
tooltip: [
pointFormat: "{series.name}: <b>{point.y:.0f} $unit</b> ({point.percentage:.1f}%)"
],
accessibility: [
point: [
valueSuffix: '%'
]
],
plotOptions: [
pie: [
allowPointSelect: true,
cursor: 'pointer',
dataLabels: [
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
]
]
],
series: [[
name: seriesName,
colorByPoint: true,
data: data
]]
])
} |
Semicircle
Pie chart can be displayed as a hollow semi-circle. This is a compact visualization, often used in dashboards.
| Tip |
|---|
| Semicircular pie charts are more compact than the full circle pie charts. |
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
ResultHighchart semiCircle(
String title,
String seriesName,
String unit,
List<Map<String, Object>> data
){
return api.buildHighchart([
chart: [
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
],
title: [
text: title,
align: 'center',
verticalAlign: 'middle',
y: 60
],
credits : [enabled: false],
tooltip: [
pointFormat: "{series.name}: <b>{point.y:.0f} $unit</b> {point.percentage:.1f}%"
],
accessibility: [
point: [
valueSuffix: '%'
]
],
plotOptions: [
pie: [
dataLabels: [
enabled: true,
distance: -50,
style: [
fontWeight: 'bold',
color: 'white'
]
],
startAngle: -90,
endAngle: 90,
center: ['50%', '75%'],
size: '150%'
]
],
series: [[
type: 'pie',
name: seriesName,
innerSize: '50%',
data: data
]]
])
} |