CODEWITHSUNDEEP
highcharts
hubson bropa
hubson bropa

Reputation: 2770

how to remove space above semicircle angular gauge

When creating a semicircle angular gauge with highcharts, I always get empty space above the gauge using the following pane settings:

    ....
    pane: {
        startAngle: -90,
        endAngle: 90,
            center: ['50%', '100%']
            ...
    }
    ...

Here's an example: http://jsfiddle.net/eM8A7/

Reducing the height of the container div just makes the gauge smaller, but leaves the space. Tested this with Chrome and IE.

Is there a way to remove the empty space or am I attempting this incorrectly?

Upvotes: 1

Views: 2502

Answers (3)

hyperloopfan
hyperloopfan

Reputation: 53

In addition to the answer from @pawel-fus, I got the desired settings using height in css

#container {
    height: 300px; 
}

Upvotes: 0

DevGrowth.Tech
DevGrowth.Tech

Reputation: 1563

after I tried to modify the margin property, I also found the 'spacing' property could also be helpful:
spacing:
The distance between the outer edge of the chart and the content, like title, legend, axis title or labels. The numbers in the array designate top, right, bottom and left respectively. Use the options spacingTop, spacingRight, spacingBottom and spacingLeft options for shorthand setting of one option. Defaults to [10, 10, 15, 10].
links here

Upvotes: 2

Paweł Fus
Paweł Fus

Reputation: 45079

You need to set size for pange: http://jsfiddle.net/eM8A7/1/

    pane: {
        startAngle: -90,
        endAngle: 90,
        size: '150%',
        center: ['50%', '100%'],
    }

It's also a good idea to disable margins:

    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false,
        margin: [0,0,0,0]
    },

Upvotes: 6

Related Questions