是否可以删除段之间的边框，但在 react-chartjs-2 中保留饼图周围的边框？

Question

I am using react-chartjs-2 pie chart and I'd like to remove the lines(borders) between slices BUT I want to show the border around the chart. Could someone tell me the way to do this? Thanks in advance!

my code is like that now:

import {Pie} from 'react-chartjs-2';
class App extends Component {
   render() {
      return (
         <div className='pieChartPositioner'>
            <Pie              
              height={36}
              width={36}
              data={{
                 datasets: [{
                     data: [20 , 80],
                     backgroundColor: ['red', 'green'],
                     borderColor: 'black',
                     borderWidth: 2,
                  }],
               }
             }/>
         </div>  
      )
   }
}

Answer 1

You need to set the borderWidth as 0 in the pie's arc configuration which by default is set to 2 .

The arc configuration can be used in polar area, doughnut and pie charts and is set under the elements key.

You can change it by either:

1. Setting the global arc options

Chart.defaults.global.elements.arc.borderWidth = 0;

2. Or through the options object that you passed to the chart

 var options = { elements: { arc: { borderWidth: 0 } } };

See docs for more info.

Answer 2

I am writing this because marked answer didn't help me, I guess it was changed in meanwhile.

You need to set borderWidth inside datasets that you are passing to data prop.

Example:

const data = {
        datasets: [{
          borderWidth:0,
          data: [9, 1],
          backgroundColor: ['#ffffff', '#000000'],
        }],
    };
    
    return (
      <Pie data={data} />
    )