how to always show label in chartjs without mouseover?
15,899
This could be solved by adding the options
onAnimationComplete
and tooltipevents
.
onAnitmationComplete
functions calls the showToolTip
method to show the tooltips
like a hover event does.
Usually tooltipevents
are define to show tooltips
but here an empty array need to be passed. Check the below fiddle example for line chart.
var options = {
tooltipTemplate: "<%= value %>",
showTooltips: true,
onAnimationComplete: function() {
this.showTooltip(this.datasets[0].points, true);
},
tooltipEvents: []
}
Note : This approach does not support multi data-sets in line and bar charts, but does support multi data-sets in pie charts
var data_line = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}]
};
var options = {
tooltipTemplate: "<%= value %>",
showTooltips: true,
onAnimationComplete: function() {
this.showTooltip(this.datasets[0].points, true);
},
tooltipEvents: []
}
var context = $('#chart3').get(0).getContext('2d');
var chart = new Chart(context).Line(data_line, options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div id="chartContainer">
<canvas id="chart3" width="500" height="500"></canvas>
</div>
Author by
sonill
Updated on June 16, 2022Comments
-
sonill almost 2 years
I am using latest version of Chart Js. I need to always show label in chart (without mouse over). Is it possible? If yes, then please help me with working example code.
Thank you.
My Current Chartjs code:
var ctx = $("#myChart"); var label = ctx.data('clabel').split(','); var val = ctx.data('cval').split(','); var myChart = new Chart(ctx, { type: 'line', data: { labels: label, datasets: [{ label: 'Daily Capital', data: val, backgroundColor: [ 'rgba(0, 153, 34, 0.5)', ], borderColor: [ 'rgba(0, 153, 34, 1);', ], borderWidth: 2 }] }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, animation: { duration: 0, // general animation time }, hover: { animationDuration: 0, }, responsiveAnimationDuration: 0, // animation duration after a resize elements: { line: { tension: 0, // disables bezier curves }, }, tooltips: { callbacks: { label: function(tooltipItem, data){ return '£' + tooltipItem.yLabel; }, title: function(tooltipItem, data){ return ''; }, } }, scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });
I hope someone can help. Thank you in advance