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 chartImage = "<div id='chartContainer' style='width:3800px'></div>"
$("#container").append(chartImage);
 var maxValue = Math.max.apply(null,input.dataSeries); 
Highcharts.chart('chartContainer', {
    chart: {
        type: 'column',
        height: 600,
        marginTop: 120,
        marginBottom: 120,
        events: {      
        load: function() {
          var ren = this.renderer;
          var yPos = 0;
          var xPos = 0;
          ren.label(input.heading, 10, 70).attr({
            zIndex: 10
          }).css({
            fontSize: '11px',
            fontFamily: 'Arial',            
            color: 'rgb(0,0,0)'
          }).add();
          ren.label('End year 1', 10, ren.height-70).attr({
            zIndex: 10
          }).css({
            fontSize: '11px',
            fontFamily: 'Arial',            
            color: 'rgb(0,0,0)'
          }).add();
          ren.label('Distribution', 10, ren.height-60).attr({
            zIndex: 10
          }).css({
            fontSize: '11px',
            fontFamily: 'Arial',            
            color: 'rgb(0,0,0)'
          }).add();
          ren.html("<hr style='width:3800px; margin: 0px'/>", 10, ren.height-30).attr({
            zIndex: 10
          }).css({
            fontSize: '11px',
            fontFamily: 'Arial',            
            color: 'rgb(0,0,0)'
          }).add();
          ren.label('Advertising', 10, ren.height-40).attr({
            zIndex: 10
          }).css({
            fontSize: '11px',
            fontFamily: 'Arial',            
            color: 'rgb(0,0,0)'
          }).add();
          for (var b = 1; b < input.dataSeries.length; b++) {          
            ren.label(input.distribution[b]+'%', 95 + xPos+b, ren.height-65).attr({
              zIndex: 10,
              align: 'center'
            }).css({
              fontSize: '10px',
              fontFamily: 'Arial',
              fontWeight: 'bold',
              color: 'rgb( 0,0,0)'
      ...