JSFiddle - React, Tailwind, and code Playground

by Glutamat

HTML

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

JavaScript

var data = {
    labels: ["x1", "x2", "x3"],
    datasets: [
        {
            label: "First",
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderWidth: 1,
            data: [10,20,30],
        },        
        {
            label: "Second",
            backgroundColor: 'rgba(255, 206, 86, 0.2)',
            borderWidth: 1,
            data: [5,20,35],
        }
    ]
};

var options= {
  scales: {
    xAxes: [{
      stacked: true,
    }],
      yAxes: [{
        stacked: false,
        ticks: {
          beginAtZero: true
        },
      }]

  }
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});