Search code examples
javascripthtmlcsshighchartspie-chart

Highcharts semi-pie - remove space between pie and legend

I'm struggling with the semi circle donut chat of Highcharts. I'm trying to reduce the gap between the bottom of the donut and the legend below, without success.

Here is the basic chart I'm working on :

https://jsfiddle.net/vmw0pekL/2/

And the result is :

enter image description here

This is the basic graph without so many customization. What I tried next is to play with the marginTop and marginBottom chart properties. I managed to reduce the space between the graph and the legend but now I have a huge gap at the top of the chart... Here's the result :

https://jsfiddle.net/vmw0pekL/3/

And the result is :

enter image description here

Do someone know how to deal with this issue ? I'd like to get no space on top on the graph, and no space between the graph and the legend.

Solution

  • The reason why there is a big blank gap below the semi circle donut chart, is because this space is reserved for the lower part of the full pie chart (change startAngle to 0 and endAngle to 360 to see what I mean). You can change that by setting a new values for the center array and by setting a new size of the pie.

    API Reference:
    http://api.highcharts.com/highcharts/plotOptions.pie.center

    Example:
    https://jsfiddle.net/327uxkbt/