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
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With