CODEWITHSUNDEEP
javascripthighcharts
user3580669
user3580669

Reputation: 11

How to remove space below the semi-circle in highcharts?

As you can see, there is a huge empty space below the semi-circle. It seems that although I used startAngle=-90 and endAngle=90 to draw a semi-circle pie, but it still draws a whole circle but just hides the bottom half.

here is the code:http://jsfiddle.net/vv72ceug/17/

Here is how it looks

Upvotes: 1

Views: 1329

Answers (3)

Mo Baqeri
Mo Baqeri

Reputation: 333

I appreciate everyones answer but none of the above answers do the trick to completely remove the white space below the graph.

I have found a css trick which would do this for you.

imagine this is the container tag.

you need to apply the following css to get what you want:

div#container {margin-bottom: -45% !important;}
div#container > div {margin-bottom: -45% !important;}
div#container > div.highcharts-container > svg {margin-bottom: -45%; max-height: 50% !important;}

I hope this helps

Upvotes: 0

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

Set your size parameter as width value, then you get rid of spacing.

Example: http://jsfiddle.net/vv72ceug/40/

Upvotes: 0

Roco CTZ
Roco CTZ

Reputation: 1117

Even if you set the startAngle and endAngle so you display only half of it, the space for the other half is still reserved. You can achieve the result that you want by repositioning the center of the chart.

Try changing the center property from center: ['50%', '75%'] to center: ['50%', '90%']. This way you move the chart down the page so you don't have the empty space underneath.

Have a look at this JS Fiddle.

Upvotes: 1

Related Questions