Search code examples
javascriptchartshighchartspie-chartlogarithm

How to draw a pie with logarithmic scale in HighCharts?

I need to draw a pie (or a donut, or an half donut, I think that it's the same process) in Highcharts. The problem is that the data are heavily biased, i.e. one slice has size = 3 and the second one has size = 1000.

the final result is a pie with a giant slice and a slice almost invisible.

my chart

Is there a way to print the size of the slices in a logarithmic way (as for the axis charts)?

Solution

  • A pie chart does not use axis, so setting its type to logarithmic will not work. What you can do is transforming your data and preserving the "real" value so it can be displayed in a tooltip, data labels, etc.

        var data = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
        logData = data.map(function (value) {
        return {
            y: Math.log(value) / Math.LN10, 
            realY: value // store a pure value
          };
      });


    // later in chart options
    tooltip: {
     pointFormat: 'x = {point.x}, y = {point.realY}' // access the pure value in a tooltip
    }

    Comparison pie charts with transformed data and with "pure" data: http://jsfiddle.net/rz9899j8/