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
- Not able to add elements to an array in typescript using chart.js and bootstrat charts
- Change border color on legend in Chart.js
- Chart is not rendering properly time axis
- How to build dynamic charts with Chart.js
- How to use legendCallback or similar when using Chart.js with TypeScript
- why tooltip appears wrong in my chart JS?
- How to have custom colors in ng2-charts and chart.js according to data?
- change space between horizontal (grid) lines for line chart
- Chart js cut the title and the legends
- ChartJS dynamically adding values with jQuery array
- Chart.js xAxis linear scale : strange behavior
- Changing Legend Label Position in VueChartjs
- ChartJS 2.0 differences in code help needed
- X and Y axis labels not displaying on line chart (Chart.js)
- How do i use chartjs in react project properly?
- How can i add additional Data(Type) to chart.js
- Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
- Charts.js Multi Line scales. See value curve
- How to implement concentric doughnut charts in polymer 1.0 using Chart.js?
- diplay barchart in a <div>
- react-chartjs-2 how to set multiple background levels within a line chart
- How to get x-axis value in chart as string?
- How do I remove the y-axis labels from a graph?
- Can't figure out how to skip first datapoint on the x-axis and labels on X-axis skip second-to-last datapoint with Chart.js
- Chart.js Picture inside doughnut segment
- Is it possible to add a drop shadow to chart.js line chart?
- Why does one chart overlays another (chart.js)?
- Chartjs stacked bar separate tooltip for all stacked
- Update chart data in angular2-chartjs
- Initialize a Chart.js chart with data from an api