Come rimuovere il bordo bianco dal grafico a torta HighCharts?

Question

Sto usando i grafici alti per mostrare i grafici a torta, qualcuno può dirmi come posso rimuovere questo bordo bianco intorno al raggio. Il mio codice è riportato di seguito anche l'immagine schermata del grafico.

Non ho molta esperienza con i grafici alti se qualcuno lo sa, per favore aiutatemi. La documentazione è anche molto difficile da leggere e capire

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

È necessario impostare la proprietà plotOptions.pie.borderWidth0:

$(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>