Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 27 Next »

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

Use pie charts will small data sets.

Circular Pie Chart

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

pie chart circle
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
                     ]]
    ])
}

Semi Circle

Pie chart showing a hollow semi-circle. This is a compact visualization, often used in dashboards.

Semi circular pie charts are more compact than the full circle pie charts.
pie chart semi circle
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
                 ]]
    ])
}
  • No labels