JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/6.1.1/highcharts.js"></script>


<div id="container" style="height: 500;width:900"></div>

JavaScript

//Signture Over Time related Data need to inject here for top 3 rows
var datalist =[
     {
     name:"Market share",
     data:[39.35532439,37.08552189,35.42185768,34.93323875,35.54972514,38.37101242] 
     },
     {
       name:"Power in the Mind",
       data:[30.61384405,28.73880548,29.14309261,27.07352689,28.83269128,30.72277856],
     },
     {
        name:"Equity gap",
        data:[-8.741480337,-8.346716405,-6.278765069,-7.859711869,-6.717033854,-7.648233861]
     }];

//Chart Related data need to inject here for all opportunity,atrisk,newcustomer etc...
var series =[
     {
        name: 'Opportunity',
        data: ['',0.856904695,0.75101105,0.70609572,1.738651989,1.624477725,1.705591454]
    }, {
        name: 'At Risk ',
        data: ['',10.2624734,9.727103508,7.398317049,10.35838595,9.085398923,9.800946709]
    }, {
        name: 'New Customers',
        data: ['',0.19430768,0.421381287,0.419432592,0.388175171,0.327112322,0.342743663]
    },{
        name: 'Increased spend ',
        data: ['',0.662597015,0.329629763,0.286663128,1.350476818,1.297365402,1.362847791]
    },{
        name: 'Reduced Spend',
        data: ['',29.09285099,27.35841838,28.02354063,24.57485281,26.46432621,28.57006571]
    },{
        name: 'Steady',
        data: ['',1.17255224,1.351290685,0.762136998,1.616039389,1.374312844,0.972209811]
    },{
        name: 'Defectors',
        data: ['',9.089921156,8.375812824,6.63618005,8.742346556,7.711086079,8.828736897]
    }
];
 
 $(function() {
  $("#container").highcharts({

    chart: {
      borderColor: "rgb(235,235,235)",
      height:500,
      width:900,
      marginTop: 150,
      marginLeft: 20,
      marginRight: 20,
      marginBottom: 150,
      zIndex: 20,
        type: 'column',
    events: {
        load: function() {        
          var ren = this.renderer;          
          var xPos = 0;
          var yPos = 0;
          for (var i = 0; i < 3; i++) {
            xPos =0;
            ren.label(datalist[i].name,...