score:10
redefine default global tooltip template as follows:
chart.defaults.global.tooltiptemplate =
"<%if (label){%><%=label%>: <%}%><%= value %>";
here is another example:
var ctx = document.getelementbyid("canvas").getcontext("2d");
var mybarchart = new chart(ctx).bar(data, {
tooltiptemplate: "<%= value %> files"
});
score:1
drawing from other responses i've found that helped me, apparently the label properties can be set to functions, for example, to format currency:
var overrides = {
// show lables as currency
scalelabel: tocurrency,
// string - template string for single tooltips
tooltiptemplate: tocurrency,
// string - template string for multiple tooltips
multitooltiptemplate: tocurrency
}
function tocurrency(label) {
return '$' + label.value.tostring().replace(/\b(?=(\d{3})+(?!\d))/g, ",");
}
score:1
the great previous answers do not work with chartjs 3. this example is from the official documentation:
const chart = new chart(ctx, {
type: 'line',
data: data,
options: {
plugins: {
tooltip: {
callbacks: {
label: function(context) {
const label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += new intl.numberformat('en-us', { style: 'currency', currency: 'usd' }).format(context.parsed.y);
}
return label;
}}}}}});
score:23
validated answer doesn't work anymore. for chart.js v2,
chart.defaults.global.tooltiptemplate
is deprecated.
instead you can use callbacks to modify the displayed tooltips. there is a sample for the usage the possible callbacks in the documentation under chart.defaults.global.tooltips.
in your case i would do the following:
window.myline = new chart(chart, {
type: 'bar',
data: barchartdata,
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipitems, data) {
return tooltipitems.ylabel + ' : ' + tooltipitems.xlabel + " files";
}
}
},
}
});
don't forget to set the html meta tag:
<meta charset="utf-8">
this answer was copy from this question.
Source: stackoverflow.com
Related Query
- How to modify chartjs tooltip so i can add customized strings in tooltips
- How to modify chartjs tooltip to add customized attribute
- How to add ChartJS code in Html2Pdf to view image
- ChartJS version 3 how to add percentage to pie chart tooltip
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How can I add a euro sign (€) to all tooltips in my chart js line chart
- How Can customize chartjs doughnut chart border and tooltip
- How can I add functionality to Chartjs Doughnut chart custom legend
- How to add dataset legend in chartjs tooltip
- How to disable a tooltip for a specific dataset in ChartJS
- How to add tooltips to chart.js graph
- How to modify bar width in Chartjs 2 bar charts
- ChartJS add tooltip to a grouped bar chart
- How can I hide tooltip in Chart.js on a specific data label?
- How to add label for ChartJs Legend
- How to change the color of legend in chartjs and be able to add one more legend?
- How can I force my ChartJS canvas legend to stay in a single column?
- How do you add custom text to tooltips in charts.js
- How can i add an image as background in Chartjs?
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- How to add background color between two lines in yAxis Chartjs
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How can I create custom tooltips for each data point in a graph?
- Chartjs in Reactjs - how can I update data dynamically?
- How can I add an event to chart.js legend?
- how to set color for each item in tooltip with ChartJS
- How can I display different values on xAxes than on tooltip Chart.js V3
- How can I automatically wrap tooltip text content to multiple lines?
- How to add background color between two specific lines in Chartjs 3.1
- How can I load multiple Chartjs charts with different data on the same page?
More Query from same tag
- How update reload chart.js
- Chart.js Plugin Not Recognized as Options Property in Angular
- Limit Label test
- How to get percentage from data collected in ChartJS?
- Creating multiple canvas patterns fails
- Getting Error regarding :Cannot read property 'length' of undefined
- How to customize horizontal bar in chart.js?
- Chart.js number format
- How to load data values from cookie into Chart.js
- Angular chart.js onClick is not working - how to get all elements of a bar when it is clicked on
- Hide Legend in Chart.js V3.7.1
- how to show speedometer on Doughnut chart in chart.js using reactjs
- Chartjs tooltip out of page
- Auto center ticks and values on graph when there's only one with chart.js
- Chart.js: How to set the height of the rows manually
- How to display Line Chart dataset point labels with Chart.js?
- Charts.js - onComplete javascript function coming from JSON
- hereChartJS Line Chart with Time Axis
- ChartJS Tooltips with time axis and multiple datasets
- Creating a heart rate monitor
- hide dataset by default using Chart.js and a custom script
- How to pass dynamic string as dataset in charts.js
- Unexpected behavior with chart.js
- manipulate objects from inside a function
- How i can refresh chart without refresh page?
- How to offset axes in a scatter plot?
- How to stop chartjs zoom more than visible points?
- 404 Not Found Error when trying to display a chart with Chart.js
- Display character after y-axis data value in onhover pop up Chart.js
- How to add horizontal scroll to a bar graph in chartjs?