是否可以在Chart.js中更改饼图外围的颜色？

Question

Hi I'm making a pie chart using Chart.js. I have a small issue about styling. The background of pie chart is purple and I want to make the periphery of pie chart purple. Default color is white.

Is it possible to change the color of periphery from default color?

Current view

This is the current view. Periphery is white. I want to change it to purple to assimilate it to the background.

Code

export default class Categories extends React.Component{
constructor(props){
    super(props);
    this.state = {
        slideOpen : false,
        piData : piData
      }

this.handleClick = this.handleClick.bind(this);
this.update = this.update.bind(this);
}

handleClick(){
    this.setState({
        slideOpen : !this.state.slideOpen
    })
    console.log(!this.state.slideOpen)
}

update() {
  var piData;
  this.setState({
    piData : piData
  })
console.log('data' + piData)
}    

render(){
 console.log('check' + piData)
 const CategoriesPanel = this.state.slideOpen? "slideOpen" : "";
 const { length } = this.props
 console.log( 'result' + piData )

  var totalData = piData + piData2 + piData3 + piData4 + piData5;

  let newpiData =  function() {
   return parseInt((piData /  totalData ) * 100 ) };

   let newpiData2 =  function() {
   return parseInt((piData2 /  totalData ) * 100) };

   let newpiData3 =  function() {
   return  parseInt((piData3 /  totalData ) * 100) };

   let newpiData4 =  function() {
   return  parseInt((piData4 /  totalData ) * 100) };

   let newpiData5 =  function() {
   return  parseInt((piData5 /  totalData ) * 100) };

   console.log('update data ' + newpiData())

  console.log('question item piData parent component' + piData)


  const data = {
  labels: [
    'question1',
    'question2',
    'question3',
    'question4',
    'question5'
   ],
  datasets: [{
    data: [ newpiData() , newpiData2(), newpiData3(), newpiData4(), newpiData5()],
    backgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ],
    hoverBackgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ]
  }]};
return(
 <div>
 <div id="chart" className={CategoriesPanel}>
 <Pie style={{"fontSize" : "20px" }}data={data}/>
 <div className="categoriesSlide" onClick={this.handleClick}>{this.state.slideOpen? <img src={Arrowup} alt="arrowup" className="arrowup" /> : <img src={Arrowdown} alt="arrowdown" className="arrowdown"/>}</div>
<button onClick={this.update} className="chartButton">Update Information</button></div>

 <div className="clear">

 <List  />
 <ListSecond />
 <ListThird />
 <ListFourth />
 <ListFifth />
 </div>
 </div>
    )
}
}

Answer 1

Yes, You can change border color.Use bordercolor property for this. You need to use array of borderColor . Here borderColor array length is equal to No. of pie chart slices

borderColor:['purple','purple','purple','purple','purple']


 datasets: [{
    data: [ newpiData() , newpiData2(), newpiData3(), newpiData4(), newpiData5()],
    backgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ],
    hoverBackgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ],
  borderColor:['purple','purple','purple','purple','purple']
  }]};

DEMO: https://codepen.io/anon/pen/NadBvz

DOCS: http://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties

Answer 2

It is as simple as that: http://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties

const data = {
  labels: [
    'question1',
    'question2',
    'question3',
    'question4',
    'question5'
   ],
  datasets: [{
    data: [ newpiData() , newpiData2(), newpiData3(), newpiData4(), newpiData5()],
    backgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ],
    hoverBackgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ],
    borderColor: ["purple", "purple", "purple", "purple", "purple"]
  }]};

As you can see I have added borderColor property for data set which is in fact array just like backgroundColor .