I've been trying to remove the margin and the padding from an HighCharts semi-circle-donut.

I've tried both with margin: [0,0,0,0] and all the different four spacing properties. I've also tried to set the size property of plotOptions to 100%.

I've created a jsfiddle / to demonstrate the issue and the options I've tried. As you can see there're still huge paddings between the semi-circle and the container.

The funny thing is that setting either margin or spacing to 0 works on regular pies from HighCharts.

UPDATE:

According to the accepted answer the solution for this chart is to use negative margin together with an explicit height for the container.

I've been trying to remove the margin and the padding from an HighCharts semi-circle-donut.

I've tried both with margin: [0,0,0,0] and all the different four spacing properties. I've also tried to set the size property of plotOptions to 100%.

I've created a jsfiddle http://jsfiddle/W7bXw/1/ to demonstrate the issue and the options I've tried. As you can see there're still huge paddings between the semi-circle and the container.

The funny thing is that setting either margin or spacing to 0 works on regular pies from HighCharts.

UPDATE:

According to the accepted answer the solution for this chart is to use negative margin together with an explicit height for the container.

• javascript
• jquery
• css
• highcharts

Share Follow edited Jan 31, 2014 at 10:22 elbuild asked Jan 31, 2014 at 10:01 elbuildelbuild 4,89944 gold badges2626 silver badges3232 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

this should help you: http://api.highcharts./highcharts - http://api.highcharts./highcharts#chart.margin Here you can find how you can make the padding of your chart smaller, or 0. Add this your chart script and change the values as you need them to fit in your page

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

UPDATE: Check this: http://jsfiddle/W7bXw/2/

You have to set a width to your div #container and just then set the margins.

Following options work for me

In the chart options, move the chart up by negative top and bottom margin.

chart: {
   marginTop: -50,
   marginBottom: -50,
   marginLeft: 0,
   marginRight: 0,
}

Inside the plot options size should be size: '100%'.

plotOptions: {
    pie: {
       dataLabels: {
          enabled: true,                    
            style: {
               fontWeight: 'bold',
               color: 'black',
           }
        },
        size: '100%',
        startAngle: -90,
        endAngle: 90,
        center: ['50%', '75%']
    }
 },

I think this is something you expect

 series: [{
        pointPadding: 0,
         groupPadding: 0,
        type: 'pie',
        size: '100%',
        name: 'Browser share',
        innerSize: '150%',
        data: [
            ['Firefox',   45.0],
            ['IE',       26.8],
            ['Chrome', 12.8],
            ['Safari',    8.5],
            ['Opera',     6.2],
            ['Others',   0.7]
        ]
    }]

change the innerSize to 150% and try