JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<div class="chart-wrap" style="width: 100%; height: 100%;">
    <canvas id="canvas" style="width: 100%; height: auto;"></canvas>
</div>
<div id="js-legend" class="chart-legend"></div>

JavaScript

var lineChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
        label: "Gewicht",
            fillColor : "rgba(141,255,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
      backgroundColor : "rgba(215, 44, 44, 0.2)",
            pointStrokeColor : "#fff",
            data : []
        },
        {
            label : "BMI",
            fillColor : "rgba(215, 40, 40, 0.9)",
            strokeColor : "rgba(151,187,205,1)",
      backgroundColor : "green",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : []
      
        }
    ]
};

// I put the canvas element in a var just to clean up the 'new Chart' syntax
var canvas = document.getElementById("canvas").getContext("2d");

//this is the new syntax
var myLine = new Chart(canvas, {
  type: 'line',
  data: lineChartData//,
  //options: options //if you had any to pass
});