Just set the label and tooltip options like so … options: { legend: { display: false }, tooltips: { callbacks: { label: function(tooltipItem) { return tooltipItem.yLabel; } } } } Fiddle – http://jsfiddle.net/g19220r6/
If you want do increase spacing in all charts you can put this code before creating : Chart.Legend.prototype.afterFit = function() { this.height = this.height + 50; }; Of course, I don’t try but i think you can change it (or copy the original Chart object before, to keep the original padding). Bye,
You can customize the tooltips using the chart options tooltip configuration section, as explained here: http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration As shown in the example code below, you can change things like color, sizing and styles. Check out the documentation linked above for a full list of configurable options. If you want to add the percentage to the tooltip … Read more
Update: The below answer shows a percentage based on total data but @William Surya Permana has an excellent answer that updates based on the shown data https://stackoverflow.com/a/49717859/2737978 In options you can pass in a tooltips object (more can be read at the chartjs docs) A field of tooltips, to get the result you want, is … Read more
From chart.js version 2.x backwards: The options object can be added to the chart when the new Chart object is created. var chart1 = new Chart(canvas, { type: “pie”, data: data, options: { legend: { display: false }, tooltips: { enabled: false } } });
Just set the label and tooltip options like so … options: { legend: { display: false }, tooltips: { callbacks: { label: function(tooltipItem) { return tooltipItem.yLabel; } } } } Fiddle – http://jsfiddle.net/g19220r6/
I found a solution that works for hiding the grid lines in a Line chart. Set the gridLines color to be the same as the div’s background color. var options = { scales: { xAxes: [{ gridLines: { color: “rgba(0, 0, 0, 0)”, } }], yAxes: [{ gridLines: { color: “rgba(0, 0, 0, 0)”, } … Read more