Waterfall

by anothernick

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="min-width: 310px; height: 200px; margin: 0 auto"></div>

JavaScript

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'columnrange',
      inverted: true
    },

    title: {
      text: ''
    },

    xAxis: {
      categories: ['DNS', 'Connect', 'Request', 'TTFB', 'TTLB']
    },

    yAxis: {
      labels: {
        enabled: false
      },
      title: {
        text: ''
      }
    },
    credits: {
      enabled: false
    },

    tooltip: {
      valueSuffix: ' ms'
    },

    plotOptions: {
      columnrange: {
        dataLabels: {
          enabled: true,
          formatter: function() {
            if (this.y == this.point.high)
              return this.point.high + ' ms';
            return '';
          }
        }
      },
      series: {
        pointPadding: 0,
        groupPadding: 0,
        pointWidth: 10,
        colorByPoint: true
      }
    },
    colors: [
      '#77BD06'
    ],

    legend: {
      enabled: false
    },

    series: [{
      name: 'Timing',
      data: [
        [0, 100],
        [85, 200],
        [100, 127],
        [100, 127],
        [0, 100]
      ]
    }]

  });

});