JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<script src="https://raw.githubusercontent.com/nnnick/Chart.js/master/Chart.min.js"></script>
<script src="https://dima117.github.io/Chart.Scatter/Chart.Scatter.min.js"></script>
<div>
  <canvas id="bars" width="400" height="400"></canvas>
</div>
<!-- <div>
  <canvas id="pie" width="400" height="400"></canvas>
</div> -->
<div>
  <canvas id="line" width="400" height="400"></canvas>
</div>
<!-- <div>
  <canvas id="scatter" width="400" height="400"></canvas>
</div> -->
<div>
  <canvas id="gauge" width="400" height="400"></canvas>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

div {
  width: 45%;
  display: inline-block;
}

JavaScript

var options = {
  fillColor: "rgba(151,187,205,0.5)",
  strokeColor: "rgba(151,187,205,1)"
};

window.addEventListener("load", function() {
  Chart.defaults.global.responsive = true;
  Chart.defaults.Line.datasetFill = false;
  Chart.defaults.Line.datasetStrokeWidth = 10;
  Chart.defaults.Line.pointDot = false;
  Chart.defaults.Scatter.datasetStroke = false;
  Chart.defaults.global.animation = false;
  Chart.defaults.Doughnut.percentageInnerCutout = 80;

  // Bar chart
  var data = {
    labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
    datasets: [{
      data: [10, 8, 0, 0, 0, 0, 9]
    }]
  };

  for (var dataset in data.datasets) {
    for (var option in options) {
      data.datasets[dataset][option] = options[option];
    }
  }
  var myBarChart = new Chart(bars.getContext("2d")).Bar(data);

  // Pie
  var data = [{
    value: 300,
    label: "Red"
  }, {
    value: 50,
    label: "Green"
  }, {
    value: 100,
    label: "Yellow"
  }];
  //var myPieChart = new Chart(pie.getContext("2d")).Pie(data);

  // Line
  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],
    datasets: [{
      data: [0, 0, 0, 0, 0, 2, 1, 2, 0, 0, 1, 2, 0, 4, 1, 0, 1, 1, 0, 1, 3, 0, 0]
    }]
  };
  var myLineChart = new Chart(line.getContext("2d")).Line(data);

  // Scatter
  var data = [{
    data: [{
      x: 19,
      y: 65
    }, {
      x: 27,
      y: 59
    }, {
      x: 28,
      y: 69
    }, {
      x: 40,
      y: 81
    }, {
      x: 48,
      y: 56
    }]
  }];
  //var myScatterChart = new Chart(scatter.getContext("2d")).Scatter(data);

  // Gauge
  var data = [{
    value: 75
  }, {
    value: 100 - 75
  }];

  data[1].color = "transparent";

  var myDoughnutChart = new Chart(gauge.getContext("2d")).Doughnut(data, {
    onAnimationComplete: function() {
      this.chart.ctx.textAlign = "center";
      this.chart.ctx.fillStyle = "black";
      this.chart.ctx.font =...