JSFiddle - React, Tailwind, and code Playground

by Peter A

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
                    <div class="tst">
   <canvas id="myChart" width="1080" height="300"></canvas>
  </div>

CSS

.tst {
            width: 1280px;
            height: 400px;
            background: #eee;
        }

JavaScript

//animated line graph JS
        var myData = {
            labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            datasets: [
              {
                  fillColor: "rgba(220,220,220,.5)",
                  strokeColor: "rgba(220,220,220,1)",
                  pointColor: "rgba(220,220,220,1)",
                  pointStrokeColor: "#fff",
                  data: [65, 59, 90, 81, 56, 55, 40]
              },
              {
                  fillColor: "rgba(90,190,90,.5)",
                  strokeColor: "rgba(90,190,90,1)",
                  pointColor: "rgba(90,190,90,1)",
                  pointStrokeColor: "#fff",
                  data: [40, 48, 40, 40, 90, 27, 90]
              }
            ]
        }

        new Chart(document.getElementById("myChart").getContext("2d")).Line(myData)