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
- Chart.js: how to set multiple color to tick of y axes if > or < 0
- Updating chart.js chart with dataset of different size
- How write the labels of the data inside a Doughnut Chart made with Chart.js?
- Chart.js unable to create chart
- Auto center ticks and values on graph when there's only one with chart.js
- Changing the Y axis unit in Chartjs
- ng2-charts access chartjs object to apply chartjs functions
- Vue-Charts label numbers to the side of a bar chart
- How to align legend in angular-chart.js
- Chart.js limit the display size of the chart
- How to use JSON data as chartjs data?
- Flickering of charts and getcontext error with chartjs in the context of Vuejs
- Chart.JS Global Options
- Chartjs display multiple info with different units in label
- Hover/click area in filled line chart in chart.js
- "TypeError: chart_js__WEBPACK_IMPORTED_MODULE_9__.default is not a constructor"
- I'm trying to use chart.js in angular to create a simple bar chart but I'm getting an error as 'legend' type doesn't exist for options
- How to set a time scale to a ChartJS chart from JSON?
- Chart.js doesn't show anything
- ChartJS changing graphs based upon Drop Down selection
- javascript : extrapolate an array of numbers
- Count the duplicates in a string array using React JS
- Create a prop for a chart.js pie chart
- Error: "barWithErrorBars" is not a chart type. Vue - chartjs-chart-error-bars
- Cannot read property 'getElementAtEvent' of undefined, Typescript
- My ChartJS Line needs to click the color legend first before it plots the data
- How to change color of hidden legend item instead of strike-through in Chart.js
- HTML Input Form to a Javascript Variable
- ChartJS add custom tooltip to a stacked bar chart
- Side effects from Chartjs for only *some* clients