.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],

​

];

//  tooltip.format("{%x} is a {%season} month\nLowest temp: {%value}°C");

​

anychart.onDocumentReady(function () {

  data.forEach(drawChart);

});

​

function drawChart(data, index){

    var chart = anychart.pie([

        {x: "Cycling", value: 10},

        {x: "Swimming", value: 12},

        {x: "Run", value: 18},

        {x: "Hiking", value: 11},

        {x: "Alpinism", value: 9}

    ]);

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

    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}%\ntestb');

   chart.title("Donut Chart: Label in the center");

    chart.title().align("left");

    chart.container("container");

  chart.stroke('1.5 white 1')

    chart.container('c'+index);

    chart.draw();

}