JSFiddle - React, Tailwind, and code Playground

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:1200px;height:688;overflow-x: scroll;"></div>
</div>

JavaScript

( input =>{
var chartWidth = ((input.dataSeries.length * 120)+100) < 900 ? 900 : ((input.dataSeries.length * 120)+100);
var linewidth = ((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 pre ="";
maxValue =maxValue < 100 ? 100 : Math.round(maxValue * 1.1);
console.log(maxValue);
if( maxValue < 100)
    {
         values = 100;
    }
    else if(maxValue< 9999) 
    {	
        values= Math.round(maxval/100);
        pre= "K";
 	}
 	else if(maxValue< 1000000) {
     	values = Math.round(maxValue/1000) 
        pre= "K";
 	}
 	else if( maxValue< 10000000) {
     	values= (maxValue/1000000);pre= "M";
 	}
 	else if(maxValue< 1000000000) {
     	values = Math.round((maxValue/1000000));pre= "M";
 	}
 	else if(maxValue< 1000000000000) {
     	values = Math.round((maxValue/1000000000));pre= "B";
 	}
 
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) + pre , (Math.round(values) < 10 ? 20 : Math.round(values)< 100 ? 15 : 12), 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',            
          ...