score:10
Accepted answer
In order to do this in chart.js, you need to use the tooltips.callbacks.label
callback property. The value returned from this callback is what is used to generate the tooltip text.
Here is your chart configured with a tooltip callback that uses the local string representation for your data value.
var ctx = document.getElementById("chart-area").getContext("2d");
var myPie = new Chart(ctx, {
type: 'pie',
data: {
labels: ["FAISAL","muhammadfaisali","faisaliqbal3699"],
datasets: [{
backgroundColor: ["#00b638","#efaa30","#50c8ea"],
data: [500000, 75000, 100000]
}],
},
options: {
title: {
display: true,
text: 'Employee Overview',
fontStyle: 'bold',
fontSize: 20
},
tooltips: {
callbacks: {
// this callback is used to create the tooltip label
label: function(tooltipItem, data) {
// get the data label and data value to display
// convert the data value to local string so it uses a comma seperated number
var dataLabel = data.labels[tooltipItem.index];
var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();
// make this isn't a multi-line label (e.g. [["label 1 - line 1, "line 2, ], [etc...]])
if (Chart.helpers.isArray(dataLabel)) {
// show value on first line of multiline label
// need to clone because we are changing the value
dataLabel = dataLabel.slice();
dataLabel[0] += value;
} else {
dataLabel += value;
}
// return the text to display on the tooltip
return dataLabel;
}
}
}
}
});
You can see it in action at this codepen.
Source: stackoverflow.com
Related Query
- Thousand separator in pie chart of charts.js
- how to add Thousand separator in pie chart tooltips of charts.js
- Chart js pie or doughnut charts 3 inside instead of 1
- Padding Between Pie Charts in chart js
- Pie Chart using chart.js not showing up but bar charts are?
- how to not repeat code while creating multiple charts in chart js
- Chart.js multiple doughnut charts above pie chart
- Click events on Pie Charts in Chart.js
- Chart.js Show labels on Pie chart
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chartjs random colors for each part of pie chart with data dynamically from database
- Pie Chart Legend - Chart.js
- chart.js: Show labels outside pie chart
- How set color family to pie chart in chart.js
- chartjs datalabels change font and color of text displaying inside pie chart
- How to save Chart JS charts as image without black background using blobs and filesaver?
- Chart.js v2.6: Add arrows to pie chart output values
- Display values outside of pie chart in chartjs
- Chart.js ng2-charts colors in pie chart not showing
- Chart.js tooltips callback function with pie charts
- Make pie chart smaller Chart JS
- Display Doughnut Pie Chart As Circle Progress Chart.js
- How to display data labels outside in pie chart with lines in ionic
- How to hide section in a Chart.js Pie Chart
- Chart.js: width and height of a pie chart not respected
- How to create single value Doughnut or Pie chart using Chart.js?
- Is it possible to avoid the shrinking of Chart.js pie charts when accompanied by labels?
- Chart.js pie chart not showing in Google Chrome canvas
- How to use chart.js script to draw multiple pie Charts
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
More Query from same tag
- Modifying the X-Axis Labels of a Scatterplot in Chart.js 2
- Export chart.js into fixed sized chart
- Calling data from outside of Chartjs code
- How to use two datasets in chart.js doughnut chart?
- Chartjs for Line chart, values on y-axis
- How to lazy evaluate and execute javascript?
- how to change color of bar if its goes above avg score in mixed graph chart.js
- CSS/JSX: Fixing two HTML canvas within a div with relative width as 60% and 40%
- Chart.js line graph change x axis seperation
- Remove moment from chartjs in angular app
- annotation line not visible in scatter chart in chartjs
- Chart.js Radar Not Displaying Data Values
- Chart.js Chart does not start at
- Android WebView HTML5 canvas error
- I have 10 points inn x-axis, ranging [-25,-20,,-15,-10,0,10,20,30,40,50]. But I want my line chart to start from -15 of x-axis. How we can achieve?
- save my chart.js output to an image
- ChartJS - TypeError: Cannot read property '_model' of null - Angular
- Draw a horizontal bar chart from right to left
- Connecting Chart.js to MySQL database
- chart.js with json data and jquery - error :-(
- Checkboxes unchecked after cart.js end of update animation
- ChartJS not work in .php loaded by jquery .load() (AJAX)
- Convert decimal values in array to percentages and pass all values into graph
- Convert this canvasjs chart to chart.js chart
- ChartJs How to display horizontal and vertical lines through the datasets points with their values on axes?
- Chartjs change horizontal axis value
- How to create an animate-on-update Stacked Bar chart using Chart.js(or Chartist)?
- Html5 web page with chartjs: loading an external json file and create a line chart
- High and low points on chart getting cut off
- Pie chart using chart.js