Highcharts Demo

author(s): Torstein Hønsi

by Saurabh Khemka

HTML

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

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

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'columnrange',
        inverted: true
    },
    title: {
        text: 'Bull Base Bear Scenarios'
    },
    
    xAxis: {
       
        categories: ['Bull Case', 'Base Case', 'Bear Case'],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
         
        labels: {
            overflow: 'justify'
        }
    },
    
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    series: [{
        data: [
         [0, 450],
            [0, 370],
            [0, 160]]
      }, 
      {
        data: [
        [420, 450],
            [280, 370],
            [260,420]]
       },
    	{
    		data: [
        [260,420],
        ]
   		}]
      
    /* series: [{
        data: [
         [0, 450],
            [420, 450],
            [260,420],
            [0, 370],
            [280, 370],
            [160,280],
            [0, 160]
        ]
    }] */
});