How can I remove the white border from HighCharts pie chart?

Question

I am using High-charts to show pie charts, can any one tell me how can I remove this white border around the radius. My code is given below also the screen shot image of chart.

I have no lot of experience with high-charts if anyone know this please help me. The documentation is also very tough to read and understand

$(function () {
  
  $('#cashflow_graph').highcharts({
        chart: {
            type: 'pie',
			backgroundColor:'red',
        },
        title: {
            text: false
        },
        yAxis: {
            title: {
                text: false
            }
        },
        plotOptions: {
            pie: {
                dataLabels: {
                        enabled: false
                    },
                shadow: false,
                center: ['50%', '50%']
            },
			series: {
				states: {
					hover: {
						enabled: false,
						halo: {
							size: 0
						}
					}
				}
			},
			
        },
		 credits: {
            enabled: false
        },
        tooltip: {
			enabled: false,
            valueSuffix: '%'
        },
        series: [{
            name: 'Cash Flow',
            data: [
                {
                    name: 'Incoming',
                    y: 40,
                   
					color: '#87b22e'
                },
				{
                    name: 'Outgoing',
                    y: 30,
                    
					 color: 'black'
                },
				{
                    name: '',
                    y: 30,
					 color: 'white'
                }
                
            ],
            size: '80%',
            innerSize: '80%',
            dataLabels: {
				enabled: false,
                formatter: function () {
              
					return false;
                }
            }
        }]
    });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>


<div id="cashflow_graph" style="height: 300px; width:100%;"></div>

Answer 1

You need to set the plotOptions.pie.borderWidth property to 0:

$(function() {
  $('#cashflow_graph').highcharts({
    chart: {
      type: 'pie',
      backgroundColor: 'red',
    },
    title: {
      text: false
    },
    yAxis: {
      title: {
        text: false
      }
    },
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: false
        },
        shadow: false,
        center: ['50%', '50%'],
        borderWidth: 0 // < set this option
      },
      series: {
        states: {
          hover: {
            enabled: false,
            halo: {
              size: 0
            }
          }
        }
      },

    },
    credits: {
      enabled: false
    },
    tooltip: {
      enabled: false,
      valueSuffix: '%'
    },
    series: [{
      name: 'Cash Flow',
      data: [{
          name: 'Incoming',
          y: 40,

          color: '#87b22e'
        }, {
          name: 'Outgoing',
          y: 30,

          color: 'black'
        }, {
          name: '',
          y: 30,
          color: 'white'
        }

      ],
      size: '80%',
      innerSize: '80%',
      dataLabels: {
        enabled: false,
        formatter: function() {
          return false;
        }
      }
    }]
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>

<div id="cashflow_graph" style="height: 300px; width:100%;"></div>