subset stacked bars chart - javascript

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

Related

Angular. Highcharts. Column Chart. Positioning of Columns on X-Axis

I have a highchart made with Angular.JS. Each column has its own stack level and is essentially managing its own group of data
My series is an array of objects that looks like this:
[{
name: seriesGroup.name,
data: [number],
xAxis: xAxisLevel,
stack: xAxisLevel
}]
The problem I'm having is that highcharts seems to automatically add some offset styling that moves each column out of position. Ideally I want all columns centered correctly like the one for Currency. See image above where you can see the x-positioning that's getting added to the rect tag.
Is there any parameter I can set to highcharts to disable this effect? I have not been able to find anything of the sort in the API docs.
Please take a look at the fiddle for a simplified version:
https://jsfiddle.net/nz0v8w5u/
You can make it setting appropriate plotOptions.series.groupPadding property. In your case 0.5 seems working as expected. Check the code and demo posted below.
Why do you add five xAxis instead of using just one? With one axis highcharts will automatically position columns properly and the code is much easier. Check this example: https://www.highcharts.com/demo/column-stacked
Code:
plotOptions: {
column: {
minPointLength: 1,
groupPadding: 0.5,
stacking: "normal",
dataLabels: {
enabled: false
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/7pL8mj1s/
API reference:
https://api.highcharts.com/highcharts/series.column.groupPadding

how to show data value on bar chart body rather than using tooltip?

i am using vue-chart for making a bar-chart. I want to show the values on bar chart body rather then using tooltip? for this what should I do?
Can you post some code so we can see what your options look like?
In general though. In your options you can configure the different axis. The data would display on the chart body and tooltip by default. Do you have something like this in your code?
yAxes:[{
display:false,
}],
You can also disable the tooltip if you'd like by adding the following to your options.
tooltips: {
enabled: false
}

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 :

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.

Categories