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

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/

zooming/blowup and panning option in chart.js on category scales

i am using chart.js for making the charts. i have successfully done the graph things. Just i want a help in this regard that sometimes there could be just 30-40 points to plot. but usually there are about 1000 points.
So what is the good option which i can use for better analysis for this reporting tool. Like is there any option of blow up specific point or i can use a scroll to scroll my chart and expand it horizontally, a very large.
this is my chart image.
u can see there are many points and all are congested. i want to know what is the suitable solution.
This is my chart configuration in which i have set it to the responsive.
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: label,
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var multistringText = ['Assay Value: '+tooltipItems.yLabel];
multistringText.push('Assigned Value: '+assigned_value[tooltipItems.index]);
multistringText.push('Sample ID: '+sample_id[tooltipItems.index]);
return multistringText;
}
}
},
Update: After searching and creating an issue on the official chartjs git repository . This is not possible for the category/simple x-axis lines. This mean you cannot add pan through the chart in this way using the category/simple scales on x-axis. however zooms still works fine.
Editing this question for the future readers.
P.s: Leave a comment in case of negative voting.

Check out chartjs-plugin-zoom. It is a plugin that adds the capability to zoom in/out and pan left/right/up/down to view the rest of your data that is not currently displayed on the zoomed chart.
Here is a live codepen example.
I'm not sure it will do exactly what you need, but its a great place to start (you can use this as a base and extend it to your needs). This plugin is also developed/supported by the same team as chart.js.

Stacked Bar chart fixed width bar chart issue - Chartjs

I am using chartjs Version: 2.1.4 to creating Chart in MVC C# application. I am using "barPercentage: 0.2"to control the width of Bar charts for fixed width settings. Its working fine in case of Only bar charts, But in case of "stacked bar chart" i'm unable to fix the width of bars. I am using following code to stacked bar chart as:
scales:
{
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true
}
}],
xAxes: [{
stacked: true,
// Change here
barPercentage: 0.2
}]
}
In this case "barpercentage" property is not working. Please suggest me solution if any in "chartjs Version: 2.1.4".
Thanks in advance

Replace barPercentage with categoryPercentage and fiddle with its value until you get what you want. When you have a stacked bar chart, you get one bar per category, so I guess this is the reason barPercentage is ignored, while categoryPercentage works fine.

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 :