score:10
Accepted answer
you can customize the label in callback function.
tooltips: {
callbacks: {
label: function(tooltipitem, data) {
return "daily ticket sales: $ " + tooltipitem.ylabel;
},
}
}
score:2
a bit late, but perhaps the answer by @leonf works great, didn't make it fully as i work with many datasets and great numbers, so if anyone needs it, here i left my code so the labels have the correct label and the formated value (i hope this helps someone):
var mychart = new chart(ctx, {
type: 'line',
data: {
labels: _labels,
datasets: [...]
},
options: {
scales: {
yaxes: [{
ticks: {
beginatzero: true,
stacked: false,
callback: function (label, index, labels) {
return '$' + label / 1000000;
}
},
scalelabel: {
display: true,
labelstring: 'millones de pesos'
}
}]
},
tooltips: {
callbacks: {
label: function (tti, data) {
// here is the trick: the second argument has the dataset label
return '{0}: {1}'.format(data.datasets[tti.datasetindex].label, formatmoney(tti.ylabel));
}
}
},
title: {
display: true,
text: 'avance global'
}
}
});
i left also my functions for string.format
:
string.prototype.format = string.prototype.format = function () {
var args = arguments;
return this.replace(/{(\d+)}/g, function (match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
and for formatmoney
:
function formatnumber(num) {
if (num == 'nan') return '-';
if (num == 'infinity') return '∞';
num = num.tostring().replace(/\$|\,/g, '');
if (isnan(num))
num = "0";
sign = (num == (num = math.abs(num)));
num = math.floor(num * 100 + 0.50000000001);
cents = num % 100;
num = math.floor(num / 100).tostring();
if (cents < 10)
cents = "0" + cents;
for (var i = 0; i < math.floor((num.length - (1 + i)) / 3) ; i++)
num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
return (((sign) ? '' : '-') + num + '.' + cents);
}
function formatmoney(num) {
return '$' + formatnumber(num);
}
score:33
scales: {
xaxes: [{
type: 'time',
time: {
tooltipformat:'mm/dd/yyyy', // <- here
displayformats: {
'millisecond':'hh:mm:ss',
'second': 'hh:mm:ss',
'minute': 'hh:mm:ss',
'hour': 'hh:mm:ss',
'day': 'hh:mm:ss',
'week': 'hh:mm:ss',
'month': 'hh:mm:ss',
'quarter': 'hh:mm:ss',
'year': 'hh:mm:ss',
}
}
}]
}
Source: stackoverflow.com
Related Query
- How to reformat tooltip in Chart.js?
- chart js tooltip how to control the data that show
- How to disable Chart JS tooltip when there is no value?
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- ChartJS version 3 how to add percentage to pie chart tooltip
- How to underline and bold tooltip chart js
- How to sort XY line chart tooltip items based on value and add thousands separators?
- How can I have different values for the chart and the tooltip in chart.js?
- How to show tooltip value of all data falling on the same axis in chart js?
- How to customize tooltip on mouse hover of a polar area chart of Angular Charts
- How to show tooltip only when data available in chart js?
- How to get access to Chart instance related to current tooltip callback in Chart.js
- How to get clicked bar chart tooltip data?
- How to print a chart rendered by code
- How to display Tooltip without hovering pie chart with Chart.JS
- chartjs - How to access chart instance in a custom tooltip callback
- How to change the position of the tooltip for the Bar type chart in Chart.Js
- How do I destroy/update Chart Data in this chart.js code example?
- How Can customize chartjs doughnut chart border and tooltip
- How to change React line chart tooltip title font family in chart.js
- How to always show line chart tooltip in ionic-angular.?
- How to run Chart.js samples using source code
- Chart JS 2.x: How to show a tooltip in a timeline chart?
- how to not repeat code while creating multiple charts in chart js
- How to add text inside the doughnut chart using Chart.js?
- How to clear a chart from a canvas so that hover events cannot be triggered?
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
More Query from same tag
- Load more historical data in Line charts on panning left
- How to show data values or index labels in ChartJs (Latest Version)
- Output (column bars) from Chart.js blurry in Opera browser?
- code works fine on jsfiddle but one function is not working on website
- Angular 10 - Chart.js to draw chart in Array with convas id on runtime
- ng2-Chart: can we show the tooltip data of pie chart on load?
- ChartJS tooltip values aren't matching the data after updating multiple charts
- how to set start value as "0" in chartjs?
- angular-chart.js bar chart with 100% opacity color
- ReactJs: componentWillReceiveProps doesn't get called for component whose redux action gets dispatched last
- Line chart with combination of fill and line
- C# MVC5 View dynamically filled Chart.js dont show up
- Chart.js tooltip hover customization for mixed chart
- Chart.js 2 - how to show all tooltips always and stylize it
- Chartjs tooltip anchor point position on bar charts
- How to show labels above pie chart in chart.js
- Add dynamic data in a demo chart.js file of a django template
- Adding text inside 2 different Doughuts chartjs
- Change data onclick with ChartJS
- New datases do not shows Chart js
- Manipulating data point in chart.js external tooltip
- Chart.js: load new data on click
- How to create a gantt chart using Chart.js and populate dates?
- Chart.js padding canvas
- chartjs cutoutPercentage and tooltips does not works in nextjs
- How to fit Doughnut Chart JS into Bootstrap column?
- Destroy chart.js bar graph to redraw other graph in same <canvas>
- Exporting chart.js charts to svg using canvas2svg.js
- Set Animation speed - ChartJS?
- Is there a way to have the tooltips always shown on a pie/doughnut in Chart.js v3?