title: It is possible to change the color of periphery of Pie Chart in Chart.js?
body: <p>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.</p>
  
  <p>Is it possible to change the color of  periphery from default color?</p>
  
  <p>Current view </p>
  
  <p>This is the current view. Periphery is white. I want to change it to purple to assimilate it to the background.</p>
  
  <p><a href="https://i.stack.imgur.com/oYKQ2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oYKQ2.png" alt="enter image description here"></a></p>
  
  <p>Code </p>
  
  <pre><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(
   &lt;div&gt;
   &lt;div id="chart" className={CategoriesPanel}&gt;
   &lt;Pie style={{"fontSize" : "20px" }}data={data}/&gt;
   &lt;div className="categoriesSlide" onClick={this.handleClick}&gt;{this.state.slideOpen? &lt;img src={Arrowup} alt="arrowup" className="arrowup" /&gt; : &lt;img src={Arrowdown} alt="arrowdown" className="arrowdown"/&gt;}&lt;/div&gt;
  &lt;button onClick={this.update} className="chartButton"&gt;Update Information&lt;/button&gt;&lt;/div&gt;
  
   &lt;div className="clear"&gt;
  
   &lt;List  /&gt;
   &lt;ListSecond /&gt;
   &lt;ListThird /&gt;
   &lt;ListFourth /&gt;
   &lt;ListFifth /&gt;
   &lt;/div&gt;
   &lt;/div&gt;
      )
  }
  }
  </code></pre>