score:1
Accepted answer
first get the total
for the data we can use javascript's reduce
method
const total = vm.data.reduce((a, b) => a+b, 0);
now update the label callback to calculate the percentages.
callbacks: {
label: (ttitem,data) => (`${data.labels[ttitem.index]}: ${math.round(data.datasets[ttitem.datasetindex].data[ttitem.index]/total*10000)/100}%`)
}
note, in the above code i've rounded the percentages to show 2 decimal points, you might want to change that.
here's the entire code for maincontroller.
function maincontroller($scope, $timeout) {
var vm = this;
vm.labels = ["download sales", "in-store sales", "mail-order sales", "other sales"];
vm.data = [360, 507, 207, 900];
const total = vm.data.reduce((a, b)=> a+b, 0);
vm.options = {
legend: {
display: true,
position: 'bottom'
},
tooltips: {
callbacks: {
label: (ttitem,data) => (`${data.labels[ttitem.index]}: ${math.round(data.datasets[ttitem.datasetindex].data[ttitem.index]/total*10000)/100}%`)
}
},
cutoutpercentage: 60,
tooltipevents: [],
tooltipcaretsize: 0,
showtooltips: true,
onanimationcomplete: function() {
self.showtooltip(self.segments, true);
}
}
}
Source: stackoverflow.com
Related Query
- ChartJS - Show percentage base on data on hover (AngularJS)
- Chart Piechart in only show percentage on hover but it shows data and label with percentage both i just want to show percentage only percentage
- ChartJS - Show percentage on hover (AngularJS)
- chartjs show dot point on hover over line chart
- ChartJS show gaps in time data
- Show data dynamically in line chart - ChartJS
- Chartjs - show elements in all datasets on hover using bar chart
- How to show data values or index labels in ChartJs (Latest Version)
- Chart Js Show the old data on mouse hover
- ChartJs line chart - display permanent icon above some data points with text on hover
- Show Data labels on Bar in ChartJS
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Show dynamic data with dynamic colours in chartjs
- ChartJS show jittering on hover
- Chartjs show hidden data on tooltip
- How to show the chartjs bar chart data values labels as text?
- ChartJS have xAxes labels match data source
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- ChartJS vertical bar chart - measure percentage of the data in each column based on a specified max
- Calling data from outside of Chartjs code
- Chartjs to show more set of data of click of a button
- chartjs - don't show all x-axis data points, but show all in tooltips
- Is there any way to show tooltip by default (without hover pie chart) on chartjs
- chartjs hover over data without hoveringing on line
- How to show data from views on chartjs in django?
- Customize ChartJS Hover Data Format
- how to use chartJS to show breakdown of selected data
- Angular ChartJs does not show Data for multiple Charts
- ChartJS only show me data when I zoom-in or zoom-out
- Chartjs - my old data show sometimes, bugs?
More Query from same tag
- chart.js ajax pushing another dataset always "undefined"
- Chartjs duration horizontal bar chart
- Chart Js - Limit points on graph without limiting data
- How to use an npm package (chart.js) once installed?
- How do I make a pie chart showing number of people in an age group with JSON and ChartJS?
- Can't display data labels in chartJS
- charts.js not loading in Django
- How to use an Aurelia JSPM plugin with WebPack
- ChartJS 2.7.0 updating and exporting as png
- Calculate x and y coords for bullet trajectory - Chart.js
- Problem with primeNG chart: Module not found: Error: Can't resolve 'chart.js/auto'
- Error Message when using ChartJS with React
- Keep chart.js doughnut with fixed width and height centered in container
- How do I display two datasets on a single chart with chartjs
- Chart.js: How can I set paddings and draw a background box in a line chart?
- Ionic 3 Angular component load listener
- Chart JS: Set Spacing Between Ticks on Y-Axis
- Property 'elements' does not exist on type 'typeof Chart'
- Custom tooltip in Chart.js
- How to generate chartjs charts to pdf using laravel?
- How can I use an array of {x,y} objects to make a chart?
- ChartJS remove vertical grid lines one on two
- Chart JS: Always show tooltips in a multi dataset line chart
- How to import a doughnut Chart using Chart JS for Blazor?
- Chart.Js how to hide datapoints with "0" value in Stacked Bar Chart
- Chart.js - Increase spacing between bottom legend and chart
- Change Step Area Color Based on Value
- Chart.js page is zooming out everytime we change to a different graph while using a browser on with IOS El Capitan or latest iPad version
- how to use chart.js in angular 7
- customizing tooltip on chart.js bar chart