How to change aspect ratio and remove spacing in Highchart's gauge arc chart

Question

[RESOLVED, EXCEPT THE 3TH QUESTION]

I am building a gauge arc chart using highcharts. I found out that setting all spaces to 0 is not enough in arc chart, because the bottom space that i want to remove is reserved to a full circle chart (and not arc as mine).

As you can see the spacing 0 works fine, but I need to cut the unused space at the bottom as well.

In addition, I discovered that I can set value above and below my selected min/max values. So, I guess that's the reason for the reserved spacing.

The value is sent from the outside (have no idea what has been sent), therefore I need to add a validation for this. I wonder if it is possible using highcharts or should I take care of this beforehand?

Lastly, I want this chart to take 100% width and 100% height of its parent container, by changing it's aspect ratio. Of course, I tried setting: chart.width = '100%', but it doesn't work.

So basically, I can set fixed values in the chart property, but because I use this as a component on several pages, and later on on the mobile page, I want to make sure that this will be responsive.

So in the end, I want to achieve 3 things here, when 2 of them are related (I guess):

1. Get rid of the bottom spacing.
2. Ignore unwelcome values that deviate from my min-max values.
3. Change aspect ratio depending on container's width/height values. [still unresolved]

This is my JSON:

 chart: {
                type: 'gauge',
                backgroundColor: '#00f',
                //padding: 0,
                //margin: 0,
                //spacing: 0,
                //whiteSpace: 0
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false,
                spacingTop: 0,
                spacingLeft: 0,
                spacingRight: 0,
                spacingBottom: 0,
                borderWidth: 0
            },

            title: {
                text: ''
            },

            pane: {
                startAngle: -90,
                endAngle: 90,
                size: '100%',

                background: {
                    backgroundColor: {
                        linearGradient: [0, 0, 400/*300*/, 0],
                        stops: [
                          [0.5, '#f00'], // red
                          [0.9, '#ff0'], // orange
                          [1, '#0f0'], // green
                        ]
                    },
                    borderWidth: 0,
                    innerRadius: '70%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            },

            tooltip: {
                enabled: false
            },

            credits: false,

            plotOptions: {
                gauge: {
                    dial: {
                        radius: '90%',
                        backgroundColor: '#fff'
                    },
                    pivot: {
                        backgroundColor: 'none'
                    }
                },
                series: {
                    dataLabels: {
                        enabled: false
                    }
                }
            },

            yAxis: {
                min: -100,
                max: 100,
                lineWidth: 0,
                minorTickInterval: null,
                tickLength: 0,
                labels: {
                    enabled: false
                }
            },

            series: [{
                name: 'percent',
                data: [_this.percentValue]
            }]

Answer 1

1.

Try setting pane.size to 200% and pane.center to ['50%', '100%'].

Live demo: http://jsfiddle.net/BlackLabel/gs2rrmt1/

---

2.

Highcharts doesn't provide a mechanism for that - it's user responsibility to provide validated data.

---

3.

Highcharts chart occupies full container space by default.