Highcharts Waterfall Graph for Microservices Timings

WaterfallGraph.js

Highcharts.chart('container', {
    chart: {
        type: 'columnrange',
        inverted: true
    },
    title: {
        text: 'Different MicroServices Timings in a Waterfall Chart'
    },
    subtitle: {
        text: 'Time taken by each microservice'
    },
    xAxis: {
        categories: ['Orchestrator Service', 
                     'MicroService A', 
                     'MicroService B', 
                     'MicroService C', 
                     'MicroService D', 
                     'MicroService E', 
                     'MicroService F'],
        labels: {
            style: {
                color: 'black',
                fontSize: '14px'
            }
        }
    },
    yAxis: {
        title: {
            text: 'Timings in Seconds',
            style: {
                fontSize: '18px'
            }
        }
    },
    tooltip: {
        valueSuffix: ' sec'
    },
    plotOptions: {
        columnrange: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return this.y + ' sec';
                }
            }
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Timings',
        data: [
            {x: 1, low: 0.06, high: 4.6}, 
            {x: 2, low: 0.96, high: 3.1},             
            {x: 3, low: 0.55, high: 2.96},              
            {x: 4, low: 0.16, high: 4.26},            
            {x: 5, low: 4.6, high: 10.1},              
            {x: 6, low: 4.6, high: 10.3},              
        ]
    }]
});