Highcharts Demo

author(s): Torstein Hønsi

by Kesav Telaprolu

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div >
  <div id="container"  style="width:  900px; overflow-x: scroll;"></div>
</div>

JavaScript

( input =>{
var chartWidth = ((input.dataSeries.length * 120)+100) < 900 ? 900 : ((input.dataSeries.length * 120)+100);
var chartImage = "<div id='chartContainer' style='width:"+chartWidth+"px'></div>"
$("#container").append(chartImage);
var maxValue = Math.max.apply(null,input.dataSeries);
var values = maxValue * 1.1 >= 1000 ? maxValue * 1.1/1000 : maxValue * 1.1;
 
Highcharts.chart('chartContainer', {
    chart: {
        type: 'column',
        height: 500,
        marginTop: 100,
        marginLeft: 50,
        marginBottom: 155,
        events: {      
        load: function() {
          var ren = this.renderer;
          var yPos = 0;
          var xPos = 0;
          ren.path(['M', 49.5, 100, 'L', 44.5, 105, 'M', 49.5, 100, 'L', 54.5, 105])
                .attr({
                  'stroke-width': 1,
                  zIndex: 20,
                  stroke: 'rgb(220,220,220)'
                })
                .add();
          ren.label(Math.round(values) + 'K', (Math.round(values) < 10 ? 20 : Math.round(values)< 100 ? 15 : 10), 90).attr({
            zIndex: 10
          }).css({
            fontSize: '11px',
            fontFamily: 'Arial',            
            color: 'rgb(0,0,0)'
          }).add();
          ren.label(0, 30, 340).attr({
            zIndex: 10
          }).css({
            fontSize: '11px',
            fontFamily: 'Arial',            
            color: 'rgb(0,0,0)'
          }).add();
          ren.label(input.heading, 8, 70).attr({
            zIndex: 10
          }).css({
            fontSize: '11px',
            fontFamily: 'Arial',            
            color: 'rgb(0,0,0)'
          }).add();
          ren.label('End year 1', 8, ren.height-110).attr({
            zIndex: 10
          }).css({
            fontSize: '11px',
            fontFamily: 'Arial',            
            color: 'rgb(0,0,0)'
          }).add();
          ren.label('Distribution', 8, ren.height-97).attr({
            zIndex: 10
          }).css({
       ...