JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.min.js"></script>
<canvas class="myChart" height="150"></canvas>
JavaScript
var ctx = document.querySelector(".myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Nov", "Dec"],
datasets: [{
label: 'Findings',
data: [0, 45],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 20,
stepValue: 20,
max: 60,
min: 0
}
}]
},
annotation: {
annotations: [{
type: 'box',
drawTime: 'beforeDatasetsDraw',
yScaleID: 'y-axis-0',
yMin: 40,
yMax: 50,
backgroundColor: 'rgba(0, 255, 0, 0.1)'
}]
}
}
});