We Keep Coding

subset stacked bars chart

I want to display data I have where series of data is subset of others.
I want to display it as stacked bar but not sure how to do it, everywhere I see is just series upon another.
basically what I try to achieve is that the blue bar will be on top of the red one but each bar's label will show the full data.
example of data would be:
30 people
16 like apples
8 like apples & oranges
etc...
example of how it should look (with the example data)
Thanks

you can use c3.js for the problem Visit : https://c3js.org/samples/chart_bar_stacked.html

Maybe this is what you need. Simply set stacked to true in both axes:
options: {
scales: {
xAxes: [{ stacked: true }],
yAxes: [{ stacked: true }]
}
}
If you don't receive your data from the back end in this structure you will need to do some changes before adding it to the chart.
.:EDIT:.
Updated fiddle

How to remove legend at the bottom of chartjs doughnuts

I'm trying to remove all default labels from chartjs doughnut charts but the one at the bottom doesn't seem to go away
There was initially one legend at the top but I managed to hide that ut now I'm faced with labels at the bottom which completely ruin the chart
here's my options property in my config
options: {
cutoutPercentage: 80,
legend: {
display: false
},
tooltips: {
enabled: false,
},
}
I want all labels and legends to be gone completely so I can define my one with HTML, CSS and custom javascript
Here's a screenshot of what's happened
messed up chart that makes me want to cry

You must have some global settings or other code that is causing the x-axis to be displayed, as it is not configured in your options above and is not the default.
I put together a sample chart that shows the x-axis being displayed similar to yours.
If you turn this off in your options, that should no longer be shown. You can toggle that setting to show/not show in the demo to see the difference.
options: {
cutoutPercentage: 80,
legend: {
display: false
},
tooltips: {
enabled: false,
},
scales: {
xAxes: [{ display: false }] // <-- add this
}
}

ChartJs - Adding padding after Y- Axis

I am using chart js 2.7 .I need to add padding after Y-Axis.Means i need a gap before the start and end of the graph. I need to bring the labels inside the x-axis line. I found a similar question below.
How to Add X axis Padding in chart js Line Graph
But it provides a solution by adding null values. Is there any other solution.
Thanks

Add to your options:
options: {
scales: {
yAxes: [{
ticks: {
padding: 100
}
}],
}
}
Working jsfiddle -> https://jsfiddle.net/vz4qhqpw/2664/

Chart.js V2 ticklines no grid

I'm using ChartJs V2. Trying to have no horizontal gridlines but still have a little tick-line at the ticks. How is this possible? I'm using angular-charts to set the global options currently:
scales: {
yAxes: [{
gridLines: {
display: false,
drawTicks: true,
}
}],
}
What I have:
What I want:

The gridlines display option must be set to true for the ticks part of the gridlines to be drawn.
To show only the ticks, use the drawOnChartArea option to turn off the gridlines on the chart.
scales: {
yAxes: [{
gridLines: {
display: true,
drawOnChartArea: false,
}
}],
}
EDIT:
JSFiddle

What you need for this are Chart.js plugins.
They let you handle what is happening when events like the rendering or the update are triggered.
For instance, in your case, we want to draw again the ticks which were erased via the display:false attribute of options.scales.yAxes.gridLines.
We will then need the afterDraw event. Plugins in Chart.js are created like this :
Chart.pluginService.register({
afterDraw: function(chart, easing) {
// Your code in here
}
});
Now that you know how to do, let's focus on what to do.
What we want is to redisplay the tick lines on the yAxes. But they were removed (as I said above).
We can't bring them back, but since Chart.js charts are using a <canvas> tag, we can try to draw them once again.
To do it dynamically (most I can at least), we will need to loop in the different ticks of your y axe and, by also getting the height of your axe, we will be able to draw our own ticks.
Here is a jsFiddle (improved by the OP) with some explanation about what we must do and of course a fully working example, and here is its preview :

Horizontal stacked bar chart with chart.js

I am trying to find out if there is any plugin to do a horizontal stacked bar chart with chart.js
I see there are plugins for stacked bar charts and also for horizontal bar charts, but I didn't find one that combines both.
https://github.com/Regaddi/Chart.StackedBar.js
Anyone know how to achieve this?

UPDATED for CHARTJS V4
With the new version of ChartJS, you need to set the indexAXIS to 'y', and set the x and y scales to stacked.
options: {
indexAxis: 'y',
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
Here's an updated Codepen using V4 of ChartJS
https://codepen.io/jamiecalder/pen/vYaWyVy
ORIGINAL ANSWER BELOW USES ChartJS V2
I know this is a few months old, but I thought I'd add my answer for future generations.
I was able to do without extra plugins. If you set the xAxes and yAxes to stacked:true under scales, you can create a stacked horizontal graph.
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
Here's a quick pen to show how I did it. http://codepen.io/jamiecalder/pen/NrROeB

Take a look at the fork ChartNew.js (https://github.com/FVANCOP/ChartNew.js). This has HorizontalStackedBars (and many other additions). See https://github.com/FVANCOP/ChartNew.js/wiki/050_available_graphs for how its going to look like.