JSFiddle - React, Tailwind, and code Playground

Current Trends

by Dug Sohn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<br/>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h1>

        Current Trends <span style="color:red">+14%</span> <small>Compared to Previous Cycle*</small> </h1>
    </div>
  </div>
  <br/>
  <div class="row">
    <div class="col-sm-3">
      <h2>
        So Far This Cycle
      </h2>

    </div>
    <div class="col-sm-9 progress">
      <div class="bar current progress-bar progress-bar-striped progress-bar-animated bg-success">
        <h4>
          592 kWh <small>in 21 days</small>
        </h4>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-3">
      <h2>
        Previous Cycle
      </h2>

    </div>
    <div class="col-sm-9">
      <div class="bar previous">
        <h4>
          882 kWh
        </h4>
      </div>
    </div>
  </div>
  <br/>

  <div class="row ">
    <div class="col-sm-12 text-center">
      <div class="gexstimate">

        <h2 class="text-center ">

          June Usage Gexstimate ** <span style="color:red">1006 kWh</span> </h2>

      </div>
      <h5 style="display:none">
        <button class="btn...

SCSS

@import url(//fonts.googleapis.com/css?family=Oswald:400);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
body {
  font-family: "Open Sans", sans-serif;
  color: #555
}

a, a:link, .btn {
  color: rgba(46, 177, 52, 1.0);
  }
  
hr {
  margin:10px 3px;
  border-color:#fff
}
h2 {margin-top:0}
.chart {
  margin: 0 auto;
  width: 250px;
  height: 250px;
  position: relative;
  font-family: "Oswald", sans-serif;
}
p { margin-bottom:0; font-size:12px}

.doughnutTip {
  position: absolute;
  float: left;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 15px;
  border-radius: 1px;
  background: rgba(0, 0, 0, .8);
  color: #ddd;
  font-size: 17px;
  text-shadow: 0 1px 0 #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transform: all .3s;
  pointer-events: none;
  font-family: "Oswald", sans-serif;
}

.doughnutTip:after {
  position: absolute;
  left: 50%;
  bottom: -6px;
  content: "";
  height: 0;
  margin: 0 0 0 -6px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, .7);
  line-height: 0;
}

.doughnutSummary {
  position: absolute;
  top: 45%;
  left: 50%;
  color: #d5d5d5;
  text-align: center;
  cursor: default;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
}

.doughnutSummaryTitle {
  position: absolute;
  top: 85%;
  width: 100%;
  font-size: 13px;
  letter-spacing: .06em;
  line-height: 16px;
  color: #000;
  letter-spacing: 1px;
  font-family: "Oswald", sans-serif;
}

.doughnutTypeTitle {
  position: absolute;
  top: 50%;
  width: 100%;
  font-size: 22px;
  letter-spacing: .06em;
  line-height: 22px;
}

.doughnutSummaryNumber {
  position: absolute;
  top: 10%;
  width: 100%;
  margin-top: -3%;
  font-size: 65px;
  left: 0;
  color: rgb(43, 166, 40);
  letter-spacing: -2px;
  font-family: "Oswald", sans-serif;
}


.doughnutSummaryNumber:after {
 ...

JavaScript

var chart = AmCharts.makeChart("chartdiv2", {
    "type": "serial",
    "theme": "light",
      "dataProvider": [{
    "day": 1,
    "usage": 30
  }, {
    "day": 2,
    "usage": 29
  }, {
    "day": 3,
    "usage": 31
  }, {
    "day": 4,
    "usage": 29
  }, {
    "day": 5,
    "usage": 30
  }, {
    "day": 6,
    "usage": 25
  }, {
    "day": 7,
    "usage": 28
  }, {
    "day": 8,
    "usage": 32
  }, {
    "day": 9,
    "usage": 31
  }, {
    "day": 10,
    "usage": 31
  }, {
    "day": 11,
    "usage": 31
  }, {
    "day": 12,
    "usage": 33
  }, {
    "day": 13,
    "usage": 32
    }, {
    "day": 14,
    "usage": 21
    }, {
    "day": 15,
    "usage": 21
    }, {
    "day": 16,
    "usage": 25
    }, {
    "day": 17,
    "usage": 34
    }, {
    "day": 18,
    "usage": 32
    }, {
    "day": 19,
    "usage": 41
    }, {
    "day": 20,
    "usage": 31
    }, {
    "day": 21,
    "usage": 32
    }, {
    "day": 22,
    "usage": 35
    }, {
    "day": 23,
    "usage": 31
    }, {
    "day": 24,
    "usage": 33
    }, {
    "day": 25,
    "usage": 24
    }, {
    "day": 26,
    "usage": 21
    }],
    "valueAxes": [{
        "axisAlpha": 0.2,
        "dashLength": 1,
        "position": "left"
    }],
    "mouseWheelZoomEnabled": false,
    "graphs": [{
        "id": "g2",
        "balloonText": "[[value]] kWh",
        "bullet": "round",
        "bulletBorderAlpha": 1,
        "bulletColor": "#FFFFFF",
        "hideBulletsCount": 50,
        "valueField": "usage",
        "fillAlphas": 0.2,
        "fillColors": "lightblue",
        "useLineColorForBulletBorder": true,
        "balloon":{
            "drop":true
        }
    }],
 
    "chartCursor": {
       "limitToGraph":"g1"
    },
    "categoryField": "day",
    "categoryAxis": {
        "parseDates": false,
        "axisColor": "#DADADA",
        "dashLength": 1,
        "minorGridEnabled": false
    },
    "export": {
        "enabled": false
    }
});