html, body, #container {

    height: 30vh;

    width: 500px;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data1 = [{"x":"Get autoload data from shark","value":"708"},

{"x":"Validating shark response","value":"0"},

{"x":"Read LPNs from db","value":"1072"},

{"x":"Deep copy data for pubsub","value":"1"},

{"x":"Verify all LPNs are In-Warehouse","value":"0"},

{"x":"Verify sku totals in both domains","value":"0"},

{"x":"Set LPN objects to Loaded","value":"0"},

{"x":"Create Mutation list","value":"10"},

{"x":"Create pubsub message","value":"0"},

{"x":"Sending pubsub event message","value":"110"}];

​

    // create a chart and set the data

    var chart1 = anychart.pie(data1);

​

    // set the chart title

    chart1.title("Full transaction: 2001 ms");

​

    // set the container id

    chart1.container("container");

​

    // initiate drawing the chart

    chart1.draw();

  ///////////////////////////////////////////////////////////////

      // create data

    var data2 = [{"x":"Get autoload data from shark","value":"550"},

{"x":"Validating shark response","value":"0"},

{"x":"Read LPNs from db","value":"1181"},

{"x":"Deep copy data for pubsub","value":"0"},

{"x":"Verify all LPNs are In-Warehouse","value":"0"},

{"x":"Verify sku totals in both domains","value":"0"},

{"x":"Set LPN objects to Loaded","value":"0"},

{"x":"Create Mutation list","value":"10"},

{"x":"Create pubsub message","value":"1"},

{"x":"Sending pubsub event message","value":"123"}];

​

    // create a chart and set the data

    var chart2 = anychart.pie(data2);

​

    // set the chart title

    chart2.title("Full transaction: 2172 ms");

​

    // set the container id

    chart2.container("container");

​

    // initiate drawing the chart

    chart2.draw();

//////////////////////////////////////////////////

      // create data

    var data3 = [{"x":"Get autoload data from shark","value":"634"},

{"x":"Validating shark response","value":"0"},

{"x":"Read LPNs from db","value":"866"},

{"x":"Deep copy data for pubsub","value":"1"},

{"x":"Verify all LPNs are In-Warehouse","value":"1"},

{"x":"Verify sku totals in both domains","value":"1"},

{"x":"Set LPN objects to Loaded","value":"1"},

{"x":"Create Mutation list","value":"23"},

{"x":"Create pubsub message","value":"5"},

{"x":"Sending pubsub event message","value":"138"}];

​

    // create a chart and set the data

    var chart3 = anychart.pie(data3);

​

    // set the chart title

    chart3.title("Full transaction: 1784 ms");

​

    // set the container id

    chart3.container("container");

​

    // initiate drawing the chart

    chart3.draw();

Arrays.from(  document.querySelectorAll('svg')).forEach(svg => svg.height = 50);

});