Initial Chart

by anikettiwari

HTML

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

<div id="container"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'columnrange',
    inverted: true
  },
  xAxis: {
    categories: ['Customer A', 'Customer B', 'Customer C', 'Customer D']
  },

  legend: {
    enabled: false
  },
  series: [{
      data: [{
        x: 0,
        low: -4,
        high: 5
      }, {
        x: 0,
        low: 5,
        high: 7,
        color: "orange"
      }]
    }, {
      data: [{
        x: 1,
        low: -7,
        high: -3
      }, {
        x: 1,
        low: -3,
        high: 5,
        color: "lightgreen"
      }, {
        x: 1,
        low: 5,
        high: 7,
        color: "orange"
      }, {
        x: 1,
        low: 7,
        high: 15,
        color: "gray"
      }]
    },
    {
      data: [{
        x: 2,
        low: -23,
        high: -12,
        color: "gray"
      }, {
        x: 2,
        low: -12,
        high: -5,
        color: "orange"
      }, {
        x: 2,
        low: -5,
        high: 3,
        color: "lightblue"
      }, {
        x: 2,
        low: 3,
        high: 9,
        color: "light"
      }]
    }
  ]
});