JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<canvas id="chart-bars" width="300" height="140"></canvas>
<canvas id="chart-line" width="300" height="140"></canvas>
<canvas id="chart-stacked" width="300" height="140"></canvas>
<canvas id="chart-fill" width="600" height="280"></canvas>

CSS

body {
  background: #2c65af;
}

canvas {
  background: rgba(255,255,255,0.8);
}

JavaScript

var data = {
    labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
    datasets: [
        {
            label: "Low",
            backgroundColor: "rgba(255,255,255,0.0)",
            borderColor: "rgba(24,192,40,1)",
            borderWidth: 1,
            data: [4,0,3,2,5,4,0,0,0,2,3,4,3,3,2,1,1,0,0,0,0,2,1,1,2,0,0,1,0,0],
        },
        {
            label: "Medium",
            backgroundColor: "rgba(255,255,255,0.0)",
            borderColor: "rgba(245,134,41,1)",
            borderWidth: 2,
            data: [1,0,3,2,1,2,2,1,2,0,1,0,0,0,1,2,1,2,0,0,0,0,0,1,0,1,0,0,0,0],
        },
        {
            label: "High",
            backgroundColor: "rgba(255,255,255,0.0)",
            borderColor: "rgba(223,25,33,1)",
            borderWidth: 3,
            data: [4,3,5,3,2,3,0,0,0,0,0,2,1,3,2,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0],
        }
    ]
};

var dataWeek = {
    labels: [1,2,3,4,5,6,7,8,9,10,11,12],
    datasets: [
        {
            label: "Low",
            backgroundColor: "rgba(24,192,40,1)",
            borderColor: "rgba(24,192,40,1)",
            borderWidth: 0,
            data: [16,12,6,4,8,9,3,7,4,2,1,2],
        },
        {
            label: "Medium",
            backgroundColor: "rgba(245,134,41,1)",
            borderColor: "rgba(245,134,41,1)",
            borderWidth: 0,
            data: [11,7,4,5,7,3,2,1,3,3,2,1],
        },
        {
            label: "High",
            backgroundColor: "rgba(223,25,33,1)",
            borderColor: "rgba(223,25,33,1)",
            borderWidth: 0,
            data: [5,7,4,3,1,0,1,2,3,2,1,0],
        }
    ]
};

var chartBars = new Chart(document.getElementById("chart-bars"), {
	type: 'bar',
  data: data,
  options: {
    responsive : true,
    point : {
    radius : 1
    }
  }
});

var chartBars = new Chart(document.getElementById("chart-line"), {
	type: 'line',
  data: data,
  options: {
    responsive : true,
    elements : { point : {radius : 1}}
 ...