JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.js"></script>
<canvas id="canvas" height="450" width="600"></canvas>
JavaScript
var data = {
labels: ["January"],
datasets: [
{
type: 'line',
label: 'Test',
fill: false,
backgroundColor: 'rgba(0, 0, 0, 0)',
data: [5],
borderColor: '#000000',
pointBorderColor: '#000000',
pointBackgroundColor: '#000000',
}
]
}
var ctx = document.getElementById("canvas").getContext("2d");
mychart = new Chart(ctx, {
type: 'line',
data: data,
options: {
legend: {
position: 'bottom'
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true
},
}],
yAxes: [{
stacked: false,
ticks: {
beginAtZero: true,
callback: function(value) {
// display only integers
if(!(value%1)) {
return Number(value).toFixed(0);
}
}
}
}]
}
}
});