Pie Charts (Quick Reference)

Pie charts are useful for comparing amounts as a fraction of the total. While they can be harder to read than column charts, they remain a popular choice for small datasets.

Use pie charts with small data sets.

Circular Pie Chart

Circular pie charts are the most well-recognized version of this type of diagram. They are commonly used in dashboards.

Pie.groovy

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.

Semicircular pie charts are more compact than the full circle pie charts.


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
                 ]]
    ])
}