JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

JavaScript

var myData = [2, 10, 5, 2, 20, 30, 9];

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'bar',

  // The data for our dataset
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "Monthly goal reached",
        backgroundColor: "green",
        data: myData.map(function(value) {
          return value >= 10 ? value : null
        }),
      },
      {
        label: "Monthly goal not reached",
        backgroundColor: "red",
        data: myData.map(function(value) {
          return value < 10 ? value : null
        }),
      }
    ]
  },

  // Configuration options go here
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }

  }
});