score:5
Accepted answer
Just override the draw function too (you can move it to a plugin too if you want to keep it separate - see https://stackoverflow.com/a/37393862/360067) in groupableBar
...
draw: function(ease) {
Chart.controllers.bar.prototype.draw.apply(this, arguments);
var self = this;
// check if this is the last dataset in this stack
if (!this.chart.data.datasets.some(function (dataset, index) { return (dataset.stack === self.getDataset().stack && index > self.index); })) {
var ctx = this.chart.chart.ctx;
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = this.chart.options.defaultFontColor;
// loop through all its rectangles and draw the label
helpers.each(self.getMeta().data, function (rectangle, index) {
ctx.fillText(this.getDataset().stack, rectangle._model.x, rectangle._model.y)
}, this);
ctx.restore();
}
},
...
and then just use your stack labels in place of your stack index, like so
...
stack: 'Stack 1'
...
Updated fiddle - http://jsfiddle.net/bm88sd5c/
If you want your stack labels to animate, just change _model
to _view
in the draw
override.
A full solution would also consider the length of the stack label and rotate it (just like axis labels), but I think that's going to be a tad more complicated.
Source: stackoverflow.com
Related Query
- Add a custom label to the top or bottom of a stacked bar chart
- ChartJS add custom tooltip to a stacked bar chart
- How to add labels on top of the chart bar with Chart.js 2
- Chart.js stacked bar chart text on top of the stacked bars
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- How do you create rounded corners on the top and bottom of a bar chart and the between 2 part still draw like image?
- 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
- PrimeNg bar chart how to show a label for the y-axis
- ChartJS Line chart cut off at the top and bottom
- Chart.js add icon at the top of bar
- Chart JS display Data Value on the top of the Bar
- Adding custom text to Bar Chart label values using Chart.js
- Lift the bar up from the bottom in bar type chart
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Add HTML to label of bar chart - chart js
- How to show a "total" sum label on the top of stacked bars
- How to add space to the bottom of the chart in chartjs [angular]
- ChartJS: Highlight dataset in a stacked bar chart when hovering over the legend?
- ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas
- How to remove a label in top of bar in chartjs chart
- How to add additional label in the middle of each bar using ChartJS
- How to add an extra tick on top of the highest bar in Chart.js v2.9.4 (grace)?
- how to write labels along with data on top and bottom of each stack in bar chart
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- Vue-Charts label numbers to the side of a bar chart
- How do remove the bottom scale on a Chart.js bar chart
- 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
More Query from same tag
- Chart JS tick options not working for y axis
- Create charts with a loop in Django with charts.js
- How do I display a different chartjs tooltip title?
- How to remove strikethrough from label once click on legend
- Update Chart JS with date range selector
- How to use ChartJS object in a click event handler?
- My data array has null values in chart.js. Is there a way to draw a line between the two segments to maintain visual progress?
- How to add horizontal scroll to a bar graph in chartjs?
- ChartJS with ChartJS DataLabels: Change Color per Dataset for Value Labels
- Chartjs displays numbers not time
- ReactJs issues with setstate on array in ChartJs
- Chart.js how to display multiple labels on multi bar stacked chart
- chart.js time x-axis - start ticks at specific time
- Overlay text message on top of a chart
- Angular 2 - Invoking function from a JS file (chart.js) - function not found
- Chart.js How can I embed additional values to each data point in radar chart
- Trouble with chart scaling and zooming using Chart.js and chartjs-zoom-plugin
- Place tooltip on the outer side of the doughnut chart
- Unable to change the legend symbol to rounded square in chartjs in React
- Pie chart.js - show all 3 segment borders
- Chart.js canvas resize
- Chart of chart.js can't display In Edge and Firefox
- Chart.js: Strikethrough tick labels
- angular-chart.js - define set Y axis width
- Chart.js - Vertical crosshair (vertical annotation that moves with mouse) in line graph
- Chart.js bar chart labels do not valign
- How to show different product name for every bar in chart js
- How to fix page layout with embedded frame
- chart.js v 2.0.1 line, scatter chart pointRadius bug or I'm doing it wrong
- Display point style on legend in chart.js