score:1
Accepted answer
this jsfiddle may help you. jsfiddle source: github issue.
html
<canvas id="mychart"></canvas>
script
chart.defaults.groupablebar = chart.helpers.clone(chart.defaults.bar);
var helpers = chart.helpers;
chart.controllers.groupablebar = chart.controllers.bar.extend({
calculatebarx: function (index, datasetindex) {
// position the bars based on the stack index
var stackindex = this.getmeta().stackindex;
return chart.controllers.bar.prototype.calculatebarx.apply(this, [index, stackindex]);
},
hideotherstacks: function (datasetindex) {
var meta = this.getmeta();
var stackindex = meta.stackindex;
this.hiddens = [];
for (var i = 0; i < datasetindex; i++) {
var dsmeta = this.chart.getdatasetmeta(i);
if (dsmeta.stackindex !== stackindex) {
this.hiddens.push(dsmeta.hidden);
dsmeta.hidden = true;
}
}
},
unhideotherstacks: function (datasetindex) {
var meta = this.getmeta();
var stackindex = meta.stackindex;
for (var i = 0; i < datasetindex; i++) {
var dsmeta = this.chart.getdatasetmeta(i);
if (dsmeta.stackindex !== stackindex) {
dsmeta.hidden = this.hiddens.unshift();
}
}
},
calculatebary: function (index, datasetindex) {
this.hideotherstacks(datasetindex);
var bary = chart.controllers.bar.prototype.calculatebary.apply(this, [index, datasetindex]);
this.unhideotherstacks(datasetindex);
return bary;
},
calculatebarbase: function (datasetindex, index) {
this.hideotherstacks(datasetindex);
var barbase = chart.controllers.bar.prototype.calculatebarbase.apply(this, [datasetindex, index]);
this.unhideotherstacks(datasetindex);
return barbase;
},
getbarcount: function () {
var stacks = [];
// put the stack index in the dataset meta
chart.helpers.each(this.chart.data.datasets, function (dataset, datasetindex) {
var meta = this.chart.getdatasetmeta(datasetindex);
if (meta.bar && this.chart.isdatasetvisible(datasetindex)) {
var stackindex = stacks.indexof(dataset.stack);
if (stackindex === -1) {
stackindex = stacks.length;
stacks.push(dataset.stack);
}
meta.stackindex = stackindex;
}
}, this);
this.getmeta().stacks = stacks;
return stacks.length;
},
});
var data = {
labels: ["january", "february", "march", "april", "may", "june", "july"],
datasets: [
{
label: "my first dataset",
backgroundcolor: "rgba(99,255,132,0.2)",
data: [59, 80, 81, 56, 55, 40, 65],
stack: 1
},
{
label: "my second dataset",
backgroundcolor: "rgba(99,132,255,0.2)",
data: [80, 81, 56, 55, 40, 65, 60],
stack: 2
},
{
label: "my third dataset",
backgroundcolor: "rgba(255,99,132,0.2)",
data: [60, 59, 80, 81, 56, 55, 40],
stack: 2
}
]
};
var ctx = document.getelementbyid("mychart").getcontext("2d");
new chart(ctx, {
type: 'groupablebar',
data: data,
options: {
scales: {
yaxes: [{
ticks: {
max: 160,
},
stacked: true,
}]
}
}
});
Source: stackoverflow.com
Related Query
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- How to draw Horizontal line on Bar Chart Chartjs
- How to change Chart.js horizontal bar chart Width?
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- how to customize tool tip while mouse go over bars on Chart js bar chart
- ChartJS: how to make a bar chart with a horizontal guideline:
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- How to customize chart js Bar chart shape?
- How do I create a stacked horizontal bar chart with Chart.js in React?
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- How to customize horizontal bar in chart.js?
- How to order a horizontal bar chart - chartJS & Chart.HorizontalBar.js
- How to make labels on both side from horizontal bar chart js
- how to modify horizontal bar chart using chart js
- How to set percentage value by default on each bars in horizontal bar chart js
- chart js 2 how to set bar width
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Horizontal stacked bar chart with chart.js
- Chart.js Bar Chart - how to chart bars from 0
- Horizontal bar chart in chart.js
- How to put rounded corners on a Chart.js Bar chart
- chartjs : how to set custom scale in bar chart
- How to set labels align left in Horizontal Bar using chart.js?
- How to add second Y-axis for Bar and Line 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?
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Creating a horizontal bar chart extension on Chart.js
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How to have solid colored bars in angular-chart bar chart
More Query from same tag
- Chart.js - How to push a collection of array into dataset
- Convert/transpose one array into another in JavaScript?
- How to create a line on a chart using chartjs-plugin-annotation
- Hover over chart shows multiple datapoints
- Angular Chartjs Overlapping Bar Chart with Chartjs ver 2.7
- Responsive ChartJS in Bootstrap Table Cell
- Chartjs box plot with Y-axis negative values
- Trying to export chart with Chartjs and React but getting erorr
- How to display data on hover inside doughnut chart in Angular Chart?
- How to access all data in a function with ChartJs?
- Adding Multiple value in Tooltips in ChartJS charts
- JS Chart: do not merge duplicate x axis labels
- How to change NaN values to 0 in Chart.js?
- hover mode on Chart.js
- create Chart using Chartjs and PHP
- Putting label array to the chartjs?
- Chart.js legend took up too much spaces
- Creating and Updating Graph in HTML and Javascript
- How to use segment property to color line / border color based on value in chart js?
- Display totals for Label (or simply display a string) inside a chart in Chart.js
- How to order bubbles according their size and not by the order of their datasets?
- Create an interactive custom tooltip for chartjs
- How to change colours for Angular-Chart.js
- Chart.js is not respecting my container dimensions
- Chart JS not displaying graph
- How do I change the bar colors in chart.js barcharts?
- Two different x-axes using charts.js and react
- Is it possible to have tick stepSize for each dataset in Chart.js?
- How can i implement RTL for Yaxis in Chartjs
- Unable to draw method in Chart.js, v2 can't be found