score:0

Accepted answer

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/


Related Query

More Query from same tag