score:0
you can try something like this fiddle, but i did not format and position the labels as of now, you can do it as you wish.
"oncomplete": function() {
var chartinstance = this.chart,
ctx = chartinstance.ctx;
ctx.font = chart.helpers.fontstring(chart.defaults.global.defaultfontsize, chart.defaults.global.defaultfontstyle, chart.defaults.global.defaultfontfamily);
ctx.textalign = 'center';
ctx.textbaseline = 'bottom';
var sums = [0, 0, 0];
this.data.datasets.foreach(function(dataset, i) {
var meta = chartinstance.controller.getdatasetmeta(i);
meta.data.foreach(function(bar, index) {
var data = dataset.data[index];
ctx.filltext(data, bar._model.x, bar._model.y);
sums[index] += data;
});
});
sums.foreach(function(v, i) {
ctx.filltext(v, 150*(i+1)+(i*50), 40);
});
}
score:0
the formatter
is called for each datalabel, meaning for every bar. that's the reason why you get the same value on top of every bar.
possible solutions would be either to plot an "invisible" bar for the combined value or check inside the formatter
function if it is called for the centered bar. then you could use mulitline labels to create a label which has the value for the current bar and the combined value as well.
edit:
after thinking about it the easiest way would be to use mixed charts. you can just calculate your combined values for each group and add a chart for these values. for example you add a line chart with showlines: false
.
new chart('mymixedcharts', {
type: 'bar',
data: {
labels: ['foo', 'bar'],
datasets: [
{
label: "value 1",
data: [12, 5]
},
{
label: "value 2",
data: [7, 8]
},
{
label: "group value",
data: [19, 13],
type: "line",
showlines: false
}
]
}
});
or as jsfiddle
Source: stackoverflow.com
Related Query
- Chart js sum of grouped bars
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- chartjs add dots to bars in grouped bar chart
- How to prevent first/last bars from being cut off in a chart with time scale
- Chart.js Bar Chart - how to chart bars from 0
- ChartJS add tooltip to a grouped bar chart
- Chart.JS Mixed Chart - Bars Not Showing
- ChartJs bar chart - keep bars left instead of equally spread across the width
- Chart JS grouped sub labels
- Creating a grouped and stacked chart in Chart.js
- How to have solid colored bars in angular-chart bar chart
- Stacked bar chart results in misaligned bars
- How to make bar chart animation where all bars grow at the same speed?
- Possible to merge 2 bars in bar chart (chart.js)
- How to show gradient vertically on chart js grouped bar chart?
- how to customize tool tip while mouse go over bars on Chart js bar chart
- Grouped Bar Chart from mySQL database using ChartJS and PHP
- Chart.js: How to get x-axis labels to show on top of bars in bar chart
- Grouped Bar Chart ChartJS
- Equal distance grouped bar chart irrespective of scale - chart.js
- Chart.js stacked and grouped horizontalBar chart
- how to display multiple sum with chart js and laravel?
- Alternating bars in bar chart in chart.js are not labelled
- Chart.js: Reverse bar chart with regular bars (Bottom to top instead of top to bottom)
- Can the colors of bars in a bar chart be varied based on their value?
- Chart.js - Pie chart calculate sum of visible values after legend click
- How to show a "total" sum label on the top of stacked bars
- Set fixed label size for grouped bar chart in angular Chartjs
- Chart.js 3.5: linear gradient doesn't apply properly when multiple bars in the same chart
- Mixed Chart calculating difference between two bars - ChartJS
More Query from same tag
- Chart.js options and documentation
- Chart.js load new data
- Plot dataset from MySQL with Chart.js and PHP
- How to render tooltip text on a different div with Chart.JS
- Why Chart.js v2 time based data not aligning with X axis correctly?
- How to parse data to graph in MVC
- How to set php data to chart.js for creating graph?
- How can I make my chart's axes use the same proportions for scaling?
- How to update css for doughnut chart with ng2-charts
- Chart.js - how to make proportional intervals on X axis on line chart
- Laravel Charts Refresh With Ajax
- chart resizing in ng2-google-charts
- What happened to generateLegend() in chartjs 3.0?
- Grouping the object by key for Chartjs bar chart
- Replace Chart.js Data during `onClick` causes _meta error
- ChartJs - Adding padding after Y- Axis
- Cannot use ng2-charts with Ionic 3 (ionic-angular 3.9.4)
- charts.js - json output to graph
- Why does x axis not increment 'monthly' chart.js. Also, XAxis not taking title
- How to create a multiline graph with differents labels
- Difficult displaying data with linechart in chart.js
- data in charts of charts.js is changing when I click in the line chart
- Cannot read property '_index' of undefined ChartistJs for value 0 or null
- I can't import ChartsModule
- Chart.js animate chart after clicking a button
- Category scale on Y-axis and time on x-axis in bubble chart in Chartjs
- Convert FirestoreCollection into an array?
- what is output format of Utils? (using chartjs in vanillajs, not react/angular)
- Anyone know how to add extra comma and string to array?
- Is there a way to display legend's data over the chart in chart.js?