aidandonnelly
Posts: 5
Joined: Tue Nov 09, 2021 9:41 am

Highcharts Gauge Remove Whitespace?

I have the following gauge chart.

When implementing this into my project, the whitespace at the top seems impossible to remove regardless of my settings. I am quite new to Highcharts so looking for a solution to this has proven to be challenging.

See image:
Image

I have replicated the problem in JSFiddle https://jsfiddle.net/bsjfzqc7/ if it would be possible for someone to help with a solution.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Highcharts Gauge Remove Whitespace?

Hi,

Thanks for contacting us with your question!

The main reason this space appears at the top is the Highchart.pane.center property set to 85% from the top (line 12 in your code).
When you look at the demo I sent, commenting on this property (line 13) solves the problem, because as it is written in the API, the default value is 50%.

Also, if you want to completely remove any margins of the chart, you should also set Highcharts.chart.margin to 0 (line 7)

Demo: https://jsfiddle.net/BlackLabel/bep74mj9/
API: https://api.highcharts.com/highcharts/pane.center

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
aidandonnelly
Posts: 5
Joined: Tue Nov 09, 2021 9:41 am

Re: Highcharts Gauge Remove Whitespace?

Hi, I have completed this, and it now leaves white space at the bottom of the container. Why would this be?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Highcharts Gauge Remove Whitespace?

Hi,

You can manipulate Highcharts.pane.center and Highcharts.pane.size properties to achieve a satisfactory effect.

Demo: https://jsfiddle.net/BlackLabel/fj7ctg58/

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”