How to reformat tooltip in Chart.js? The chart has x-axis as time, y-axis as sales amount and tooltip to show data value for both x and y. So far tooltip can work by default but I want to change the value we see in tooltip. I can reformat the time in tooltip by redefine the tooltipFormat field in 'time'. But I don't find a similar thing for y-axis data. For example, show "$1600" instead of "Daily Ticket Sales:1600".
example tooltip format image
Could anyone tell me where should that change happen?
Could the 'custom' callback function solve problem here? Here is the code, thanks!
var dates=data.linechart.dates;
var times=[];
for (var i=0; i<dates.length; i++) {
times.push(moment(dates[i],'YYYY/MM/DD'));
}
// console.log(dates);
// console.log(times);
var salesData = {
labels: times,
datasets: [
{
label: "Daily Ticket Sales",
fill: false,
lineTension: 0,
backgroundColor: "#fff",
borderColor: "rgba(255,88,20,0.4)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(255,88,20,0.4)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(255,88,20,0.4)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 3,
pointHitRadius: 10,
data: data.linechart.sales,
}
]
};
var ctx = document.getElementById("daily_sale").getContext("2d");
var myLineChart = new Chart(ctx, {
type: 'line',
data: salesData,
options: {
showLines: true,
responsive: true,
legend:{display:false},
tooltips:{
// backgroundColor:'rgba(0,255,0,0.8)',
custom: function(tooltip) {
// tooltip will be false if tooltip is not visible or should be hidden
if (!tooltip) {
return;
}
else{
console.log(tooltip);
}
}
},
scales:
{
xAxes: [{
type: "time",
time: {
displayFormat:'MM/DD/YY',
tooltipFormat: 'MM/DD/YY',
// unit: 'day',
}
}],
yAxes: [{
ticks:{ userCallback: function(value, index, values) {
// $ sign and thousand seperators
return '$'+value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
},
}],
},
}
});
To achieve this, we first add a table within the tooltip. The first column contains the categories ("women", "men"), and the second one contains the bars. In this second column, we then add HTML <div> tags and define the width of these boxes with our numerical columns.
Normally, tooltips on PieChart slices are shown when they are hovered by a cursor. This demo will show how we can disable this default behavior and only show tooltip when slice is tapped or clicked.
Tooltips: an introduction Tooltips are the little boxes that pop up when you hover over something. (Hovercards are more general, and can appear anywhere on the screen; tooltips are always attached to something, like a dot on a scatter chart, or a bar on a bar chart.)
You can create responsive charts with JSCharting through a couple simple steps: Define a <div> tag in the HTML file with a unique id. Provide this id, data, and any other options when calling JSC. Chart() in the JavaScript file.
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',
}
}
}]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With