score:1
Accepted answer
you need to change the formatter
function to make it work.
the total value shall appear on the top most value of the stacked bars only. the stacked bars however don't contain zero values nor values from hidden datasets
. i ended up with the following solution that works but can probably be improved/simplified.
const formatter = (value, ctx) => {
const stackedvalues = ctx.chart.data.datasets
.map((ds) => ds.data[ctx.dataindex]);
const dsidxlastvisiblenonzerovalue = stackedvalues
.reduce((prev, curr, i) => !!curr && !ctx.chart.getdatasetmeta(i).hidden ? math.max(prev, i) : prev, 0);
if (!!value && ctx.datasetindex === dsidxlastvisiblenonzerovalue) {
return stackedvalues
.filter((ds, i) => !ctx.chart.getdatasetmeta(i).hidden)
.reduce((sum, v) => sum + v, 0);
} else {
return "";
}
};
please take a look at your amended code sandbox and see how it works.
Source: stackoverflow.com
Related Query
- How to show a "total" sum label on the top of stacked bars
- PrimeNg bar chart how to show a label for the y-axis
- Add a custom label to the top or bottom of a stacked bar chart
- How can I datalabels and Sum display in the same time on a stacked bar
- how to show labels in laravel charts when the name of the label is on another table?
- Chart.js: How to get x-axis labels to show on top of bars in bar chart
- How can i add a calculated value on top of the bars in Chart.js?
- how to show bar value on the top of each bar in chartjs
- How show data label in the graph on Chart.js?
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- Chart.js stacked bar chart text on top of the stacked bars
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
- How to show values on top of bars in a PDF using chart.js and chartjs-node-canvas?
- Is There any way to show image on top of the stacked bar, Am getting image on every color Instead of that i need only on top of each bar
- How to sort color segments by value within the 100% stacked bars rather than by value across all the stacked bars in Highcharts or ChartJs
- Show values on top of bars in chart.js
- Chart.js Bar Chart: How to remove space between the bars in v2.3?
- How get sum of total values in stackedBar ChartJs
- chart js tooltip how to control the data that show
- Chart.js2 Radar, how to configure the label padding/spacing?
- How to change the color of Chart.js points depending on the label
- Chart JS show multiple data points for the same label
- how to always show label in chartjs without mouseover?
- How to show Y axis ticks for every point in the graph
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Remove the label and show only value in tooltips of a bar chart
- Chart.js (Stacked Bar chart) How to calculate total sum of labels in tooltips?
- Chart.js - How To Show Value of Label as Percent of X and Y Values - Currently Always 100%
- How to show only the data points that have a change in Chartjs?
- How can I show Bootstrap modal when on click in individual bars in chart.js
More Query from same tag
- Chart.js with dual axis on bar and line graph
- Error when implementing charts.js in angular
- Filter ChartJS using data from PHP
- How to add dataset legend in chartjs tooltip
- Javascript Chart.js scale fix
- Placing JavaScript content in Bootstrap Popover
- charts.js and timestamp as readable date
- Chart JS data labels getting cut
- how to align count text center in horizontal bar in the Chart.js?
- Ionic 3 Angular Chart.js update data
- Reduce space between ticks in horizontal bar-chart chartJS
- chart.js doughnut legend in the chart
- How to add label for ChartJs Legend
- ChartJS add text to canvas in linechart
- Importing and using Echarts results in [object error] in Internet Explorer
- Bar chart does not appear with Chart.js
- Chart.js - hide / remove label on second dataset
- Placing canvas (chart.js line chart) inside an SVG using d3.js
- Display all labels in Chart.js
- Creating multiple canvas patterns fails
- How to plot Firebase data with Chartjs in angular
- Access MVC Model property that is already JSON in javascript
- Accessing a slice of a react-chartjs Pie chart
- How to add images to chart labels with vue-chartjs?
- Multiple lines / data series from JSON file with Chart.js
- highlightFill for radar charts in chartJS
- Chart JS: Ignoring x values and putting point data on first available labels
- JavaScript variable in an object
- Chartjs only showing dots, line not showing
- Implementing a choropleth chart using chartjs-chart-geo plugin with react-chartjs-2