How to remove white border from HighCharts pie chart?

Question

I am using High-charts to display pie charts, can someone tell me how I can remove this white border around the radius. My code is shown below and in the screenshot from the screen.

I do not have much experience with high-chart, if anyone knows this, please help me. Documentation is also very difficult 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 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>