.grid {

    display: grid;

    grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));

}

​

html, body, .container {

    margin: 0;

    padding: 0;

}

.chart {

  height: 200px;

  width: 350px;

}

var data = [

[600, 721, 148, 786, 900],

  [1,10,5,5,4],

  [16,2,2,2,2],

  [78,8,4,68,4],

  [1,99],

  [100],

  [600, 721, 148, 786, 900],

  [600, 721, 148, 786, 900]

];

​

anychart.onDocumentReady(function () {

  data.forEach(drawChart);

});

​

function drawChart(data, index){

    var chart = anychart.pie(data);

    chart.radius('90%').innerRadius('30%');

    chart.legend(false);

    chart.connectorLength(8);

    chart.outline(false);

    chart.connectorStroke({color: "#000000 0.3"});

    chart.interactivity().selectionMode("none");

    chart.labels().position("outside");

    chart.labels().fontSize(12);

    chart.labels().format('{%percentValue}{decimalsCount:0}%');

    chart.container('c'+index);

    chart.draw();

}