JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<div id="p1" class="chart">
    <canvas id='c1'></canvas>
</div>

JavaScript

var c1 = document.getElementById("c1");
var parent = document.getElementById("p1");
c1.width = parent.offsetWidth - 40;
c1.height = parent.offsetHeight - 40;

var data1 = {
  labels : ["SUN","MON","TUE","WED","THU","FRI","SAT"],
  datasets : [
    {
      fillColor : "rgba(255,255,255,.1)",
      strokeColor : "rgba(0,0,0,.25)",

      pointColor : "#0af",
      pointStrokeColor : "rgba(255,255,255,1)",
      pointHighlightFill : "#fff",
      pointHighlightStroke : "rgba(220,220,220,1)",
      data : [150,200,235,390,290,250,250]
    }
  ]
}

var options1 = {
  scaleFontColor : "rgba(0,0,0,1)",
  scaleLineColor : "rgba(0,0,0,.1)",
  scaleGridLineColor : "rgba(0,0,0,.1)",
  scaleShowGridLines : true,
  scaleShowLabels : false,
  scaleShowHorizontalLines : false,
  bezierCurve : false,
  scaleOverride : true,
  scaleSteps : 5,
  scaleStepWidth : 100,
  tooltipTemplate: "<%= value %>" + "Guests",
        
        showTooltips: true,
        tooltipFillColor: "#0af",

        
        onAnimationComplete: function()
        {    
            this.showTooltip(this.datasets[0].points, true);          
        },
        tooltipEvents: []

}

new Chart(c1.getContext("2d")).Line(data1,options1);