Search code examples
highchartspie-chartdonut-chart

Highcharts - Pie/Donut Chart group small portion


A Pie/Donut chart will be easier to read if small portions could be grouped together to others. I would like to add this feature to zeppelin-highcharts

In this example Donut Chart. There are small portions for Safari which are impossible to read. Its better to group it together to "Safari Other Versions"

{
    name: 'Safari versions',
    categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 
                 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],
    data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
}

I'd like to group the small portions to others like this jsfiddle

{
    name: 'Safari versions',
    categories: ['Safari Other Versions', 'Safari v8.0'],
    data: [2.21, 2.56],
}

I go through Highcharts API doc, but I have not found any configuration which could enable this.

How can I implement this feature in Highcharts?


Solution

  • I think that you can add filter function before making your chart. You can also filter your data on load event callback function.

    Here you can find simple example of code filtering data in callback function:

    var groupSmallData = function(series, number) {
        var groupValue = 0,
            newData = [];
        Highcharts.each(series.data, function(p) {
            if (p.y < number) {
              groupValue += p.y;
            } else {
              newData.push([p.name, p.y])
            }
        });
        newData.push(['others', groupValue]);
        series.setData(newData)
    }
    

    Here you can find live example how it can work: http://jsfiddle.net/b33ynvaq/1/