JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
JavaScript
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["Door A", "Door B"],
datasets: [{
label: "Above Target",
backgroundColor: "Green",
data: [85, 50]
}, {
label: "Below Target",
backgroundColor: "red",
data: [15, 50]
}]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
barValueSpacing: 20,
scales: {
xAxes: [
{
labels: ['Above Target', 'Below Target'],
},
{
type: 'category',
labels: ['Above Target', 'Below Target'],
}],
yAxes: [{
ticks: {
min: 0,
}
}]
}
}
});