84946

how to always show label in chartjs without mouseover?

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

Answer1:

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>


Recommend

  • clicked div to slide with the transition div
  • How to identify animations completed or not? [closed]
  • NURBS in the OpenGL Graphics Pipeline
  • Converting imageNamed to imageWithContentsOfFile:
  • Slider content moving along with slider
  • Get a point inside bezier curve
  • Trying to change a UIImageView each 10 seconds
  • getDerivedStateFromProps is not called
  • Andorid DrawPath doesn't fill-up the enclosed area
  • GIF image not show
  • Common jQuery to disable submit buttons on all forms after HTML5 validation
  • How to create a Wordpress Shortcode that does nothing?
  • Eclipse PDT 3.0 URL generation in debug missing?
  • how to always show label in chartjs without mouseover?
  • Leave parent window active when child opens
  • Why is a textnode rendered below its parents` ::before by default?
  • Restricting user interaction in UIWebView
  • How to use php function without load source file?
  • Creating interactive contour plots on Android
  • Ada beginner Stack program
  • Adding animation at start up using an array of images
  • how to auto center objects in a form in access 2007?
  • CSS: glowing text with glow very wide and high
  • QPushButton is not changing the background-color proper
  • Load Same ACF Map Twice on Same Page
  • How do you remove the JComboBox 'click and see dropdown' functionality?
  • react split panel resize
  • Ajax Upload File: $_FILES is empty but files exists in request header
  • Can I check if a recipient has an automatic reply before I send an email?
  • Change multiple background-images with jQuery
  • VBA Convert delimiter text file to Excel
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize