Highcharts Demo

author(s): Torstein Hønsi

by AbhishekRohan

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<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; height: 400px; margin: 0 auto"></div>

JavaScript

function formatNumberY(n, currency) {
			var ranges = [{
			divider : 1e18,
			suffix : 'P'
			}, {
			divider : 1e15,
			suffix : 'E'
			}, {
			divider : 1e12,
			suffix : 'T'
			}, {
			divider : 1e9,
			suffix : 'B'
			}, {
			divider : 1e6,
			suffix : 'M'
			}, {
			divider : 1e3,
			suffix : 'K'
			}];
			for (var i = 0; i < ranges.length; i++) {
			if (n >= ranges[i].divider) {
			if (n < 1000000000) {
			return currency + (n / ranges[i].divider).toFixed(0) + ranges[i].suffix;
			} else {
			return currency + (n / ranges[i].divider).toFixed(1) + ranges[i].suffix;
			}
			}
			}
			return currency + n.toString();
			}
          Highcharts.Axis.prototype.init = (function (func) {
        return function (chart, userOptions) {
            func.apply(this, arguments);
            if (this.categories) {
                this.userCategories = this.categories;
                this.categories = undefined;
                this.labelFormatter = function() {
                    this.axis.options.labels.align = (this.value == this.axis.min) ? "left" : ((this.value == this.axis.max) ? "right" : "center");
                    return this.axis.userCategories[this.value];
                }
            }
        };
    } (Highcharts.Axis.prototype.init));
      
Highcharts.chart('container', {
					chart : {
						type : 'column',
						renderTo : 'container',
						backgroundColor : 'transparent',

					},
					navigation : {
						buttonOptions : {
							enabled : false
						} 
					},
					title : {
						text : ''
					},
					xAxis : {
						categories : ['18Q1', '18Q2', '18Q3','18Q4','19Q1'],
          
						labels : {
							align:'center',
							style : {
								color : '#555555',
								fontSize : "9px",
								fontWeight : 'normal',
								textOverflow : 'none',
								whiteSpace : 'nowrap'
							}
						}
					},
					yAxis : {
				
						labels : {
							style : {
								color : '#555555',
								fontSize : '9px',
								fontWeight :...