CODEWITHSUNDEEP
javascripthtmlcsshighchartspie-chart
BMN
BMN

Reputation: 8508

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.

Upvotes: 2

Views: 2215

Answers (2)

pawel_d
pawel_d

Reputation: 3070

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/

Upvotes: 2

Neil
Neil

Reputation: 400

this is one easy way of doing it :

chart: {
    marginTop: 10,
    marginBottom: -150,
    marginLeft: -100,
    marginRight: -100
},

#container {
  border: 1px solid red;
  height: 240px;
  font-size: 8px;
  width: 370px;
}

Upvotes: 0

Related Questions