0👍
first add this in html
<canvas id="myChart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>
:js
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}]
};
var myLineChart = new Chart(ctx).Line(data, {
customTooltips: function (tooltip) {
var tooltipEl = $('#chartjs-tooltip');
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}
tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);
// split out the label and value and make your own tooltip here
var parts = tooltip.text.split(":");
var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
tooltipEl.html(innerHtml);
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
}
});
and some styling stuff
:css
#chartjs-tooltip {
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
- [Chartjs]-Can't bind to 'data' since it isn't a known property of 'canvas'
- [Chartjs]-How to properly use the chartjs datalabels plugin
0👍
(Note that Chart.js already adds tooltip text automatically; the question above is a bit unclear. What the question is about is how to add custom text to the tooltip, rather than just the defaults that it picks – the x and y values of the given point.)
Use the callbacks
field in options.tooltips
. Note that the body of the tooltip is referred to as the "label".
tooltips: {
intersect: false, // makes it easier to select tooltips on mobile
callbacks: {
title: (toolTipItem, data) => {
let title = toolTipItem[0].x; // uses the x value of this point as the title
return title;
},
label: (toolTipItem, data) => {
let labels = data[toolTipItem.index!].labelText; // assumes your data has a `labelText` field.
return labels;
},
},
},
Note that some fields, like title
, are passed an array of toolTipItem
objects in their callback; others, like label
, are passed a single object. Hence, properties of the toolTipItem
object must be accessed differently for each.
- Callback documentation: http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
- Properties you can access on the
toolTipItem
object – https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-item-interface - Some official examples: https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback
- How to wrap long label lines?
One way or the other, split up your labels into an array, and return that; each line in the array will be on a separate line. If the lines are still too long, you’ll need to use a function to detect long lines and split them into additional array items.
Source:stackexchange.com