score:4
I managed to do what I wanted, thank you @Kubilay Karpat for bringing me to an idea how to find needed values. I would +rep you, but I don't have enough to do so.
afterLabel : function(tooltipItem, data) {
var total = 0;
total = parseInt(data.datasets[0].data[tooltipItem.index]) + parseInt(data.datasets[1].data[tooltipItem.index]);
var percentage = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] / total * 100;
var percentage = percentage.toFixed(2);
return percentage + " %";
},
score:1
Yes you can. All you need to do is traverse all datasets and sum the values that corresponds your index number. Then you can divide your number to this sum. Following code works for me:
afterLabel: function(tooltipItem, data){
var total = 0;
for (i = 0; i < data.datasets.length; i++) {
total += data.datasets[i].data[tooltipItem.datasetIndex];
}
var percentage = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] / total * 100;
var percentage = percentage.toFixed(2); // Trim decimal part
return "Percentage: %" + percentage;
}
Also, following part seems like redundant, since this the default pattern of tooltip label.
label : function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel;
},
And if you like to trim/floor/ceil the percentage like in my example you might want to consider the fact that sums of percentages might not be equal to 100 in your graph.
Source: stackoverflow.com
Related Query
- Calculate value in tooltip in ChartJS
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
- ChartJS 3.7.1 tooltip callback, get label value for the next index
- ChartJS display tooltip at maximum/minimum value
- Chartjs Tooltip Line Breaks
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- How to disable a tooltip for a specific dataset in ChartJS
- Truncating canvas labels in ChartJS while keeping the full label value in the tooltips
- How to modify chartjs tooltip so i can add customized strings in tooltips
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- chartjs tooltip is cut off when out of canvas
- Show bar with zero value in ChartJs v2
- show label in tooltip but not in x axis for chartjs line chart
- ChartJS add tooltip to a grouped bar chart
- ChartJs custom tooltip position
- Is it possible to combine two Y axes into a single tooltip with ChartJS 2?
- How do I fix over limit y axis value in ChartJS
- chartjs - Drawing vertical line on integer x axis value
- Map event position to y axis value in chartjs line chart
- Datalabels plugin chartjs showing '[object]' instead of value
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- Chartjs hovering over one Chart, shows tooltip across all charts
- Chartjs extended doughnut with text tooltip issue
- chartjs Line chart: scale respect value on x-axis
- JavaScript - Chart.js tooltip shows wrong x-axis value
- Chartjs change horizontal axis value
- Chartjs adding icon to tooltip and label
- ChartJS tooltip position / placement
- ChartJS v2: Scale value at click coordinates (time scale)
- Chartjs - Insert additional data into chart tooltip
More Query from same tag
- how to display chart data as html table chartjs
- How to render default values from Django Serializer for charting purposes?
- Javascript and Chart.js not taking user input assuming it is a variable scope issue
- How to create a stacked graph using ChartJS
- I want to hide the label in a tooltip because it shows undefined
- Javascript array not initialized
- ChartJS Update Tooltip programmatically in V2
- ChartJs events in Angular
- ChartJs line chart time cartesian axis number of ticks and wierd offset
- How to compare input text with database value in Spring Boot?
- Can you change legend style for bar datasets with chart.js?
- Using Chart.js in Web Worker
- Chart.js bar chart is overflowing its containing element
- chart.js won't display the chart in IE
- save my chart.js output to an image
- Charts.js - Bubble chart with two word axis
- Chart.js - annotation Vertical line moves with mouse in Angular 6
- Chartjs bar order adjustment after bar chart is drawn
- chart.js - dynamically added chart makes previous ones disappear
- How to add prefix to legend in ng charts using angular
- How to assign variables to data passed through a WEB API in Angular?
- How to show Charts.js lables
- Chart Js - Globally set bar chart color based on value
- javascript : extrapolate an array of numbers
- Chartjs - Insert additional data into chart tooltip
- Chart js shows old chart data when hover
- Chart.js Tooltip Information
- AJAX request not working unless alert() is used
- ChartJs with try catch
- Make chartjs re-render once