1👍
Next time when you ask a question please post the code you already have so people can help you more easily, made a quick example for you you can see underneath here.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May"],
datasets: [{
label: 'values',
backgroundColor: "red",
borderColor: "red",
data: [120, 23, 24, 45, 51]
}, {
type: 'line',
label: 'point',
backgroundColor: "green",
borderColor: "green",
data: [{
y: 'Feb',
x: 27
}]
}]
},
options: {
responsive: true,
indexAxis: 'y',
elements: {
point: {
radius: 10,
hoverRadius: 10
}
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.11/chart.js" integrity="sha512-1J1wxKm2JepFETRYyEEDHQAjc5ZgRvdYKWdfiP27m1pfDmLQ47joNkTPHVvmfkg7BLktY+Jd0TU1VAuIO81uQg==" crossorigin="anonymous"></script>
</body>
</html>
- Chartjs-How to set a global chart.js tooltip label callback
- Chartjs-ChartJS – Show percentage on hover (AngularJS)
Source:stackexchange.com