score:5
Accepted answer
label
callback can be used to modify a specific label. So try using any of afterBody
, footer
, afterFooter
callback
https://www.chartjs.org/docs/3.0.2/configuration/tooltip.html#tooltip-callbacks
Example using footer
callback
var branches_canvas = document.getElementById('branches_canvas').getContext('2d');
var branches = new Chart(branches_canvas, {
type: 'bar',
data: {
labels: ['Org1', 'Org2', 'Org3', 'Org4', 'Org5'],
datasets: [{
label: 'Packed',
data: [12, 55, 77, 32, 45],
backgroundColor: [
'#94E3EF',
],
hoverOffset: 4
},
{
label: 'Unpacked',
data: [56, 88, 22, 88, 40],
backgroundColor: [
'#FFA8A8',
],
}
],
},
options: {
plugins: {
tooltip: {
callbacks: {
footer: function(items) {
return 'Total: ' + items.reduce((a, b) => a + b.parsed.y, 0)
}
}
},
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<canvas id="branches_canvas"></canvas>
score:1
You can use the afterBody
callback to show the sum.
Example:
var branches_canvas = document.getElementById('branches_canvas').getContext('2d');
var branches = new Chart(branches_canvas, {
type: 'bar',
data: {
labels: ['Org1','Org2','Org3','Org4','Org5'],
datasets: [
{
label: 'Packed',
data: [12,55,77,32,45],
backgroundColor: [
'#94E3EF',
],
hoverOffset: 4
},
{
label: 'Unpacked',
data: [56,88,22,88,40],
backgroundColor: [
'#FFA8A8',
],
}
],
},
options: {
plugins: {
tooltip: {
callbacks: {
label: function(context) {
var label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += context.parsed.y;
}
return label;
},
afterBody: (ttItem) => (`Sum: ${ttItem.reduce((acc, val) => (acc + val.raw), 0)}`)
}
},
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<canvas id="branches_canvas"></canvas>
Source: stackoverflow.com
Related Query
- Chart.js (Stacked Bar chart) How to calculate total sum of labels in tooltips?
- Chart.js how to display multiple labels on multi bar stacked chart
- How to add data labels in each bar in stacked bar chart in chart.js?
- How to create stacked bar chart using react-chartjs-2?
- How to display inline values in a stacked bar chart with Chart.js?
- Showing Percentage and Total In stacked Bar Chart of chart.js
- Stacked horizontal bar chart along total count with chart.js
- How can I datalabels and Sum display in the same time on a stacked bar
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- angular-chart.js : how to show numbers in each bar of stacked bar chart
- Chart.js: How to get x-axis labels to show on top of bars in bar chart
- Chart.Js how to hide datapoints with "0" value in Stacked Bar Chart
- How do I create a stacked horizontal bar chart with Chart.js in React?
- How to show the chartjs bar chart data values labels as text?
- how can i show labels and value in both on bar chart
- How to add labels on top of the chart bar with Chart.js 2
- How can I create a stacked bar chart with Charts.JS that displays relative rather than absolute values?
- Using Chart.js version 3, How to left justify the y-axis labels on a stacked bar chart?
- ChartJs - stacked bar chart with groups - how to create second x-axis with stack id
- how to write labels along with data on top and bottom of each stack in bar chart
- how to insert dynamic data from sql into chartjs stacked bar chart javascript
- How to fix a stacked logarithmic bar chart values to fit the grid
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
- How to show bar chart labels clearly using ChartJS?
- How to configure Chartjs Bar Stacked Chart in Laravel 8
- In Chart.js, how do I hide certain axis labels from a stacked bar chart?
- How to make labels on both side from horizontal bar chart js
- How to sort stacked bar chart on certain value of bar in charts.js
- How to assign values to different lables(legends) of my dataset of stacked bar chart
- How to create datasets for all labels for stacked bar in chart.js?
More Query from same tag
- Use Chart.js draw method as Typescript arrow function
- Chart JS date-hour AxesX
- Chart.js - show tooltip when hovering on legend
- How to set Solid label in bar chart using Chart JS
- how can I render multiple charts in chartjs?
- Plot a multi-line graph from grouped JSON object using Charts.js
- How to add vertical line in bar chart using chartJs and ng2-charts?
- Chart.JS: How to add Data to a specific dataset
- Age pyramid chart using chart.js
- chart.js renders outside div and canvas
- The chart is not getting shown when page is loaded
- Chart.js line graph change x axis seperation
- Calculate weighted sum over all points in chart.js
- Specifying the legendTemplate in Chart.js when using asp (classic)
- Passing data from .csv (d3.js) to Chart.js, am I doing something wrong?
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Django chart.js multi axis line chart
- How to set a full length background color for each bar in chartjs bar
- Using Chart.js version 3, How to left justify the y-axis labels on a stacked bar chart?
- Chart Js Cannot read property 'length' of undefined
- Chartjs with Node.js : Unexpected token <
- ChartJS doughnut data toggle on custom button click
- Charts not showing on ASP.NET MVC page
- How to draw pile/stacked bar chart?
- Isn't draws vertical line on hover when I move cursor fast
- Chart.js change label color
- Scatter chart in chart.js
- pie chart in php with mysql data using chart.js
- Chart.js with JSON empty
- Can we remove bar chart line on click on pie chart legend label?