How to show tooltips in Chart.js?

Question

Following the guide, this code draws a line chart, but there are no tooltips. Am I missing any configuration parameter here? Tooltips appear in the textbook.

var chartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 86, 27, 90] } ] }; var ctx = document.getElementById("chart").getContext("2d"); var myNewChart = new Chart(ctx).Line(chartData, { showTooltip: true, tooltipTemplate: "<%= value %>" }); 

Answer 1

What version of chart.js are you using?

I can confirm that tooltips work using v1.0.1-beta2

 <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js"></script> 

but does not work with v0.2.0 .

Version 1.0.1-beta2 is available from cdnjs.

Answer 2

It works and displays tooltips correctly. Are you getting any error in the console?

This is how I used your code:

 var chartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 86, 27, 90] } ] }; window.onload = function(){ var ctx = document.getElementById("chart").getContext("2d"); window.myNewChart = new Chart(ctx).Line(chartData, { showTooltip: true, tooltipTemplate: "<%= value %>" }); }; 

Answer 3

You just need to put backgroundColor with a single value instead of an array:

 datasets: [{ label: "# of beauty womens", data: [12, 5, 3], backgroundColor: "#FC940B", fill: false, borderColor: "#FC940B" }] 

Embrace...