Highcharts Demo

author(s): Torstein Hønsi

by koh_edwin

HTML

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

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

CSS

#container {
    height: 400px;
}

JavaScript

Highcharts.chart('container', {
   
    yAxis:{
    		max:100,
        labels: {
            formatter: function () {
                var label = this.axis.defaultLabelFormatter.call(this);

                // Use thousands separator for four-digit numbers too
                //if (/^[0-9]{4}$/.test(label)) {
                //    return Highcharts.numberFormat(this.value, 0)+'%';
                //}
                return label+'%';
            }
        },
        tickInterval:20,
        
 			  plotLines: [{
 			    color: 'red', // Color value
 			    //dashStyle: 'dash', // Style of the plot line. Default to solid
 			    value: 45, // Value of where the line will appear
 			    width: 2, // Width of the line    
          zIndex:0
 			  }]
    },
	 xAxis: {
        categories: ['Jan', 'Feb', 'Mar'],
        plotBands: [{
 			    color: 'orange', // Color value
 			    from: 1.5, // Start of the plot band
 			    to: 1.75, // End of the plot band
           zIndex: 3
 			  },
        {
 			    color: 'green', // Color value
 			    from: -0.5, // Start of the plot band
 			    to: 0.5, // End of the plot band
          zIndex: 0
 			  }],
        
       
    },
    chart: {type:"bar"},

    series: [{name: 'a',
        data: [29.9, 20],
       
    },{name: 'b',
        data: [ 71.5, 50]
    },{name: 'c',
        data: [64, 55, 70]
    }]
});