JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://istack.000webhostapp.com/chartjs-plugin-hoverline.js"></script>
<canvas id="ctx"></canvas>
JavaScript
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'LINE',
data: [3, 1, 4, 2, 5],
backgroundColor: 'rgba(0, 119, 290, 0.15)',
borderColor: 'rgba(0, 119, 290, 0.6)',
lineTension: 0,
pointRadius: 0,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'white',
pointHoverBorderWidth: 2
}]
},
options: {
lineOnHover: {
enabled: true,
lineColor: '#bbb',
lineWidth: 1
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}]
}
}
});