score:39
you want to specify a custom tooltip template in your chart options, like this :
// string - template string for single tooltips
tooltiptemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>",
// string - template string for multiple tooltips
multitooltiptemplate: "<%= value + ' %' %>",
this way you can add a '%' sign after your values if that's what you want.
here's a jsfiddle to illustrate this.
note that tooltiptemplate applies if you only have one dataset, multitooltiptemplate applies if you have several datasets.
this options are mentioned in the global chart configuration section of the documentation. do have a look, it's worth checking for all the other options that can be customized in there.
note that your datasets should only contain numeric values. (no % signs or other stuff there).
score:1
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipitems, data) {
return data.datasets[tooltipitems.datasetindex].label+": "+tooltipitems.ylabel;
}
}
}
score:1
you need to make use of label callback. a common example to round data values, the following example rounds the data to two decimal places.
var chart = new chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
callbacks: {
label: function(tooltipitem, data) {
var label = data.datasets[tooltipitem.datasetindex].label || '';
if (label) {
label += ': ';
}
label += math.round(tooltipitem.ylabel * 100) / 100;
return label;
}
}
}
}
});
now let me write the scenario where i used the label callback functionality.
let's start with logging the arguments of label callback function, you will see structure similar to this here datasets, array comprises of different lines you want to plot in the chart. in my case it's 4, that's why length of datasets array is 4.
in my case, i had to perform some calculations on each dataset and have to identify the correct line, every-time i hover upon a line in a chart.
to differentiate different lines and manipulate the data of hovered tooltip based on the data of other lines i had to write this logic.
callbacks: {
label: function (tooltipitem, data) {
console.log('data', data);
console.log('tooltipitem', tooltipitem);
let updatedtooltip: number;
if (tooltipitem.datasetindex == 0) {
updatedtooltip = tooltipitem.ylabel;
}
if (tooltipitem.datasetindex == 1) {
updatedtooltip = tooltipitem.ylabel - data.datasets[0].data[tooltipitem.index];
}
if (tooltipitem.datasetindex == 2) {
updatedtooltip = tooltipitem.ylabel - data.datasets[1].data[tooltipitem.index];
}
if (tooltipitem.datasetindex == 3) {
updatedtooltip = tooltipitem.ylabel - data.datasets[2].data[tooltipitem.index]
}
return updatedtooltip;
}
}
above mentioned scenario will come handy, when you have to plot different lines in line-chart and manipulate tooltip of the hovered point of a line, based on the data of other point belonging to different line in the chart at the same index.
score:2
this is what my final options section looks like for chart.js version 2.8.0.
options: {
legend: {
display: false //have this or else legend will display as undefined
},
scales: {
//this will show money for y-axis labels with format of $xx.xx
yaxes: [{
ticks: {
beginatzero: true,
callback: function(value) {
return (new intl.numberformat('en-us', {
style: 'currency',
currency: 'usd',
})).format(value);
}
}
}]
},
//this will show money in tooltip with format of $xx.xx
tooltips: {
callbacks: {
label: function (tooltipitem) {
return (new intl.numberformat('en-us', {
style: 'currency',
currency: 'usd',
})).format(tooltipitem.value);
}
}
}
}
i wanted to show money values for both the y-axis and the tooltip values that show up when you hover over them. this works to show $49.99 and values with zero cents (ex: $50.00)
score:4
in chart.js 2.8.0, the configuration for custom tooltips can be found here: https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback (thanks to @prokaktus)
if you want to e.g. show some values with a prefix or postfix (in the example, the script adds a unit of kwh
to the values in the chart), you could do this like:
options: {
rotation: 1 * math.pi,
circumference: 1 * math.pi,
tooltips: {
callbacks: {
label: function(tooltipitem, data) {
console.log(data);
console.log(tooltipitem);
var label = data.datasets[tooltipitem.datasetindex].data[tooltipitem.index] || '';
if (label) {
label += ' kwh';
}
return label;
}
}
}
}
an example fiddle is here, too: https://jsfiddle.net/y3petw58/1/
score:6
tooltips: {
callbacks: {
label: function (tooltipitem) {
return (new intl.numberformat('en-us', {
style: 'currency',
currency: 'usd',
})).format(tooltipitem.value);
}
}
}
score:8
this works perfectly fine with me. it takes label and format the value.
options: {
tooltips: {
callbacks: {
label: function(tooltipitem, data) {
let label = data.labels[tooltipitem.index];
let value = data.datasets[tooltipitem.datasetindex].data[tooltipitem.index];
return ' ' + label + ': ' + value + ' %';
}
}
}
}
score:10
tooltips: {
callbacks: {
label: (tooltipitem, data) => {
// data for manipulation
return data.datasets[tooltipitem.datasetindex].data[tooltipitem.index];
},
},
},
score:11
you can give tooltiptemplate a function, and format the tooltip as you wish:
tooltiptemplate: function(v) {return somefunction(v.value);}
multitooltiptemplate: function(v) {return someotherfunction(v.value);}
those given 'v' arguments contain lots of information besides the 'value' property. you can put a 'debugger' inside that function and inspect those yourself.
score:39
in chart.js 2.1.6, i did something like this (in typescript):
let that = this;
options = {
legend: {
display: false,
responsive: false
},
tooltips: {
callbacks: {
label: function(tooltipitem, data) {
let account: account = that.accounts[tooltipitem.index];
return account.accountnumber+":"+account.balance+"€";
}
}
}
}
score:128
for chart.js 2.0+, this has changed (no more tooltiptemplate/multitooltiptemplate). for those that just want to access the current, unformatted value and start tweaking it, the default tooltip is the same as:
options: {
tooltips: {
callbacks: {
label: function(tooltipitem, data) {
return tooltipitem.ylabel;
}
}
}
}
i.e., you can return modifications to tooltipitem.ylabel
, which holds the y-axis value. in my case, i wanted to add a dollar sign, rounding, and thousands commas for a financial chart, so i used:
options: {
tooltips: {
callbacks: {
label: function(tooltipitem, data) {
return "$" + number(tooltipitem.ylabel).tofixed(0).replace(/./g, function(c, i, a) {
return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
});
}
}
}
}
Source: stackoverflow.com
Related Query
- JavaScript Chart.js - Custom data formatting to display on tooltip
- Chart JS custom tooltip option?
- chart js tooltip how to control the data that show
- Chart.js Timeseries chart - formatting and missing data values
- Add all data in the tooltip of Chart JS
- How to display data labels outside in pie chart with lines in ionic
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- ChartJs line chart - display permanent icon above some data points with text on hover
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- Chart JS display Data Value on the top of the Bar
- Populating javascript chart with Razor model data
- Chart JS custom tooltip not showing
- Chartjs - Insert additional data into chart tooltip
- Custom data in label on ChartJS pie chart
- Custom data position on the doughnut chart in chart.js
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Using chart js version 3, how to add custom data to external tooltip?
- Allow display of multiple data attributes in tooltip of Chart.js
- Beginner using chart.js: having trouble display state full of data into a column chart using variables
- Chart Js Data transformation using Javascript
- how to display chart data as html table chartjs
- Chart JS pass in custom data for points
- Display data labels on a pie chart in angular-chart.js
- How to display chart using Chartjs with JSON data in Laravel
- How do I get a chart.js chart to display data in a Node/React web application?
- nnnick chart.js - Custom Tooltip on Line Chart
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- How do I display chart on my HTML page based on JSON data sent by Node JS
- Chart JS how to display an array of data objects as bar chart
- How to get Data from API to display chart using chartjs in Vuejs
More Query from same tag
- ChartJS 2 - Adding data to chart breaks after X number of items added
- Chart.js 2.0 - How to change default appearance of canvas/chart elements
- How to change orientation of the main y-axis label in charts.js?
- ChartsJS bar chart with HH:MM:SS format
- Modify the information box of the scatter chart in Chart.JS
- ChartJS remove previous chart when making new one
- Smaller scale for volume dataset in Chart JS
- Getting chart js bar chart to fill window
- How to get unique variables from nested object?
- ChartJS horizontal bar with numbers on both scales
- ChartJS: Show all tooltips with Total for Multi Pie chart
- ChartJs 3.x: ResizeObserver is not a constructor
- Chart.js on Angular with @types/chart.js
- Is there a way to adjust only the bottom padding of a chart's title in Chart.js?
- opening json file to create chart in chart.js
- Calculate the average distance between two data sets of X and Y (in JS)
- Chartjs scaleLabel position
- Bar chart labels in Chart.JS
- Chart.js: How to group legends of dataset? So one toggle for multiple datasets?
- Render Chartjs on hidden DIV
- chartjs custom y axis values, different text for each one
- chart js using for loop
- Unable to display data in Bar Chart using react-chart-2
- Blazor server-side Chartjs
- How to rotate a linear graphic in chart.js?
- Referencing locally declared variable into an array for data for chartjs
- ChartJS: Can interior of polar area chart be hollow?
- How do I make many ChartJS charts on the same page to have the same height and also even column width?
- Change label color Y and X axis chart.js
- How to use Selenium with "chart.js"