JSFiddle - React, Tailwind, and code Playground

by Pedro Cruz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.9/highcharts.js"></script>
<div class="row">
<div class="col-sm-4">
    <div id="ETR-ProgramsGrid-ID-channel1" class="ProgramsGridBack-MMI" >
	    <img src="1" class="img-responsive marginLeft-MMI imgfromprogramsgrid-MMI" />
	        <div class="table-responsive">
              <table class="table">
                <thead>
                  <tr>
                    <th></th>
                    <th>Programs</th>
                    <th>Rat%</th>
                    <th>Shr%</th>
                  </tr>
                </thead>
              </table>
                <div id="ProgramGridGraph1"></div>
	        </div>
	     </div>
</div>
</div>

CSS

.ProgramsGridBack-MMI{
  background: #FFF;
  height:100%;
  border: 1px solid #e8e8e8;
  padding:15px;
}

.imgfromprogramsgrid-MMI{
  padding:15px 0  ;
}

.marginLeft-MMI{
  margin-left:35%;
}

JavaScript

$('#ProgramGridGraph1').highcharts({
        chart: {
            type: 'area',
            inverted: true,
            margin: 0
        },
        title: {
          text: ''
        },
        credits:{
          enabled: false,
        },
        subtitle: {
          enabled: false,
        },
        exporting:{
	  enabled: false,
        },
        legend: {
          enabled: false,
        },
        xAxis: {
	  labels:{
	      enabled: false
	  },
	  categories: [
	      'Monday',
	      'Tuesday',
	      'Wednesday',
	      'Thursday',
	      'Friday',
	      'Saturday',
	      'Sunday'
	  ],
        },
        yAxis: {
	  title: {
	      text: '',
	  },
	  labels: {
	      enabled: false,
	      formatter: function () {
		  return this.value;
	      }
	  },
	  min: 0
        },
        plotOptions: {
            area: {
                fillOpacity: 0.5
            }
        },
        series: [{
            name: 'Rat%',
            data: [3, 4, 3, 5, 4, 10, 12]
        }, {
            name: 'Shr%',
            data: [1, 3, 4, 3, 3, 5, 4]
        }]
    });