I am trying to build a stacked bar chart using c3.js.
The issue I have is that the bars that get generated are not coralated to the Y axis.
This is what I have so far: https://codepen.io/anon/pen/dZLMoY?editors=1010
And this is the code:
c3.generate({
bindto:'#chart',
data: {
type: 'bar',
columns: [
['Column 1', 2, 10, 22, 34, 9, 60],
['Column 2', 6, 15, 43, 36, 45, 75],
['Column 3', 10, 20, 79, 39, 50, 97],
['Column 4', 12, 27, 87, 76, 55, 150]
],
groups: [
['Column 1', 'Column 2', 'Column 3', 'Column 4']
],
},
bar: {
width: 15,
},
axis: {
x: {
show: true
},
y: {
show: true,
padding: {
top: 0,
bottom: 0
},
tick: {
//count: 6
},
min: 0,
max: 150
}
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
As you can see the bar chart is generated but it is not generated correctly. The last 4 bars are all equal even if the values that are provided are not.
Taking into consideration that the Y axis has the maximum value set to 150 then the 2nd, 3rd and 4th bars should not ocupy the same height as the 5th bar
What am I doing wrong?
Your axis.y.max value is less than stacked sum, so chart is clipped at the top.
Try this:
c3.generate({
...
axis: {
...
y: {
...
min: 0,
max: 500
}
}
}
Or see it in action.
Related
I made a bar graph with c3.js and I need to add non consecutive days to the graph
The problem is that the graph adds empty days
http://c3js.org/samples/timeseries.html
I used this code, it is possible to copy and paste code in page and see live result
var chart = c3.generate({
data: {
x: 'x',
type: 'bar',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-07', '2013-01-09', '2013-01-10', '2013-01-11'],
['data1', 30, 200, 100, 400, 150, 250, 250, 250, 250],
['data2', 130, 340, 200, 500, 250, 350, 250, 250, 250]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});
You can use a category axis instead of a timeseries axis. Check the example:
var chart = c3.generate({
data: {
x: 'x',
type: 'bar',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-07', '2013-01-09', '2013-01-10', '2013-01-11'],
['data1', 30, 200, 100, 400, 150, 250, 250, 250, 250],
['data2', 130, 340, 200, 500, 250, 350, 250, 250, 250]
],
},
axis: {
x: {
type: 'category',
tick: {
centered: true
}
}
}});
Is there a way in C3.js for to add COLOR to an horizontal line, the level 0 in axis y in bar graphs? By default you have this graph:
What I need is this:
Any idea? thanks.
UPDATE: I've made a line with this, but I need to add color.
grid: {
y: {
lines: [
{value: 0, text: ''}
]
}
}
In case anyone need it, this does the magic:
https://github.com/c3js/c3/issues/362#issuecomment-46377069
The reference has an example for horizontal (x-axis) lines: https://c3js.org/samples/grid_x_lines.html
// Copied from the reference
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250],
['sample2', 1300, 1200, 1100, 1400, 1500, 1250],
],
axes: {
sample2: 'y2'
}
},
axis: {
y2: {
show: true
}
},
grid: {
y: {
lines: [
{value: 50, text: 'Label 50 for y'},
{value: 1300, text: 'Label 1300 for y2', axis: 'y2', position: 'start'},
{value: 350, text: 'Label 350 for y', position: 'middle'}
]
}
}
});
Also for x-axis lines (vertical): https://c3js.org/samples/grid_x_lines.html
Let's take for example following chart http://c3js.org/samples/chart_bar.html
but replace columns data with the data below:
var chart = c3.generate({
data: {
columns: [
['data1', 30, 0, 100, 0, 150, 250],
['data2', 130, 0, 140, 200, 0, 50]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
setTimeout(function () {
chart.load({
columns: [
['data3', 130, -150, 200, 300, -200, 100]
]
});
}, 1000);
As we see we have a lot of white space or ZERO value bars, how can we remove it and remove white space. (not hide, I know how to hide it with CSS)
Image example, what should be removed
as googled in https://github.com/c3js/c3/issues/81
you need replace 0 to 'null' and add this:
line: {
connectNull: true,
},
var chart = c3.generate({
data: {
columns: [
['data1', 30, null, 100, null, 150, 250],
['data2', 130, null, 140, 200, null, 50]
],
line: {
connectNull: true,
},
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
setTimeout(function () {
chart.load({
columns: [
['data3', 130, -150, 200, 300, -200, 100]
]
});
}, 1000);
Just add
line: {
connectNull: true,
}
in your c3.generate block.
It will connect all points/bars/... on the chart with a zero value in between.
It works with null as well as with 0.
I have a c3.js bar graph with a subgraph and zooming enabled. I would like for the graph to show more x-tick labels and make the bars a little wider when the user selects a smaller area.
Here's what my graph looks like zoomed out (left) and zoomed in (right):
Here's a fiddle.
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', '2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', '2015-05-01', '2015-06-01', '2015-07-01', '2015-08-01', '2015-09-01', '2015-10-01', '2015-11-01', '2015-12-01', '2016-01-01', '2016-02-01', '2016-03-01', '2016-04-01', '2016-05-01', '2016-06-01', '2016-07-01', '2016-08-01'],
['y', 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20, 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20]
],
type: 'bar',
color: function(color, d) {
var color = d3.rgb("#E47911");
if (d.index % 2 == 0) {
color = color.darker(1.2);
}
return color;
}
},
bar: {
width: { ratio: 1.0 }
},
axis: {
x: {
type: 'timeseries',
tick: {
format: "%b",
fit: true
}
},
},
subchart: {
show: true
},
zoom: {
enabled: true
}
});
I'd like it to look more like this when zoomed in:
.
Is there a way to make this happen using C3?
copy the code to your fiddle js panel. type: 'categories' changes the bar scales.
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
['y', 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20, 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20]
],
type: 'bar',
color: function(color, d) {
var color = d3.rgb("#E47911");
if (d.index % 2 == 0) {
color = color.darker(1.2);
}
return color;
}
},
bar: {
width: { ratio: 0.8 }
},
axis: {
x: {
type: 'categories',
tick: {
format: "%b",
fit: true
}
},
},
subchart: {
show: true
},
zoom: {
enabled: true
}
});
For me Highcharts graphs are not showing in Internet Explorer. I searched and saw that extra comma might be a problem but I don't find extra comma in my script.
Following fiddle showing highcharts initialization part only.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
credits: {
text: 'Reference: WHO Child Growth Standards (Birth-2 years in percentiles).'
},
xAxis: {
categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
gridLineWidth: 1,
gridLineColor: 'lightgray',
gridLineDashStyle: 'longdash',
title: {
text: 'Age (Completed months and years)'
}
},
yAxis: {
gridLineWidth: 1,
gridLineColor: 'lightgray',
gridLineDashStyle: 'longdash',
title: {
text: 'Length (cm)'
},
tickInterval: 5,
allowDecimals: false,
min: 45,
max: 95
},
plotOptions: {
spline: {
marker: {
radius: 0,
lineColor: '#666666',
lineWidth: 1
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
borderWidth: 0,
reversed: true,
y: 30,
width: 200,
itemMarginTop: 6,
itemMarginBottom: 6
},
exporting: {`enter code here`
enabled: false
}
});
http://jsfiddle.net/aparnaunny/RzyY8/
The problem I found is the version of jQuery, which for some reason makes errors on INternet Explorer.
Try an older version, e.g. jQuery 1.9.1
For me that worked
http://jsfiddle.net/RzyY8/2/
jQuery 1.9.1
In gerenal you should run jsfiddle.net/aparnaunny/RzyY8/1/show because fiddles are not supported by ie8. Secondly run your console in the ie8, and you will see that the prbolem is in the line 361.
if(age==2.0)
{
$("#median").append('Median height for this age is 87.1161 cm');
ind=malearr24.indexOf(height);
if(ind=='-1')
{