How to have more controls over the borderColor per arc segment for chart.js pie charts

by

0👍

✅

I managed to put two charts on top of each other with the help of How can I stack two same-sized canvas on top of each other? 🙂

HTML:

<div class="wrapper">
    <canvas id="canvas1" width="400" height="300"></canvas>
    <canvas id="canvas2" width="400" height="300"></canvas>
</div>

CSS:

.wrapper {
    position: relative;
    width: 400px;
    height: 300px;
}

.wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
}

Javascript:

dataInner = {
    datasets: [{
        data: [10, 10, 10, 10,10, 10],        
            borderWidth:0,
        backgroundColor: ['blue', 'white', 'white', 'white', 'white', 'white']
    }] 
};

optionsOuter = {
    events: ['click'],          
  // change the background color of the "inner chart" depending on the clicked segment
  onClick: function(evt){
    var activePoints = myInnerPieChart.getElementsAtEvent(evt);
    // check if the was possible to determine the active point, if not return
    if (typeof activePoints === 'undefined' || activePoints.length <1) return;
    var selectedIndex = activePoints[0]._index;
    
    // change the background color of all arcs till the selected index    
    var tmp_data = [];
    for (var i = 0; i < myInnerPieChart.data.datasets[0].backgroundColor.length; i++) {
      if (i <= selectedIndex){
        tmp_data.push('blue');                                              
      }
      else{
        tmp_data.push('white'); // same color as "bar_fill" css class
      }
    }   
    
    myInnerPieChart.data.datasets[0].backgroundColor = tmp_data;
    myInnerPieChart.update();
  } 

}

dataOuter = {
    datasets: [{
        data: [10, 10],        
            borderWidth:1,
        borderColor: ['black', 'black']
    }] 
};


var myInnerPieChart = new Chart($('#canvas1'), {
    type: 'pie',
    data: dataInner
});

var myOuterPieChart = new Chart($('#canvas2'), {
    type: 'pie',
    data: dataOuter,
    options: optionsOuter
});

It looks like this and I think this should help to achieve my requirements: https://jsfiddle.net/xuce274p/3/

Leave a comment