JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="myChart" width="400" height="100"></canvas>
JavaScript
var canvas = document.getElementById('myChart');
var lastSixMonths = ["DEC", "JAN", "FEB", "MAR", "APR", "MAY"];
var data = {
labels: lastSixMonths,
datasets: [{
label: 'Counts',
data: [20000, 17000, 12000, 8000, 4000, 0],
fill: 'start',
lineTension: 0,
backgroundColor: 'rgba(133, 36, 208, 0.4)',
borderWidth: 5,
borderColor: '#8524d0',
borderCapStyle: 'round',
borderJoinStyle: 'round',
pointHoverRadius: 5,
pointHoverBackgroundColor: '#8524d0',
pointHoverBorderWidth: 2,
pointHoverRadius: 5,
pointRadius: 0,
pointHitRadius: 20,
pointStyle: 'circle',
}]
};
var myBarChart = Chart.Line(canvas, {
data: data,
options: {
scales: {
yAxes: [{
ticks: {
min: 0
}
}]
}
}
});