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.
I have create a simple XY Chart graph with percent as y axes and customers as x axes, I randomised the data between 0...100% with a set of 184 points. and have a bit of difficulty display the lower/upper region values. I have included an image for the demonstration.
Here my config file, I cant seem to find some sort of offset/padding ?
{
type: 'xy',
addClassNames: true,
autoMargins: false,
marginLeft: 67,
marginBottom: 55,
graphs: [{
balloonFunction,
bullet: 'round',
xField: 'customers',
yField: 'rate',
bulletSize: 16,
lineColorField: 'color',
}],
valueAxes: [
{
title,
borderThickness: 0,
axisThickness: 2,
maximum: 100,
labelFunction: (e,val) => { return val + "%"; },
},
{
title,
position: 'bottom',
axisAlpha: 0,
borderThickness: 0,
axisThickness: 0,
gridThickness: 0,
},
],
dataProvider: data,
};
Thanks.
There isn't a way to pad this without modifying your minimum and maximum to be further outside your 0-100 range to accommodate. Since you're using a labelFunction, you can set it up so that you don't display any labels above and below 0-100% if you want, for example:
labelFunction: (e, val) => { return (val > 100 || val < 0 ? "" : val + "%"); }
Demo below using -10 as a minimum and 110 as a maximum:
var data = [{"rate": 99, "customers": 2421},{"rate": 76,"customers": 100},{"rate": 68,"customers": 1711},{"rate": 38,"customers": 313},{"rate": 94,"customers": 393},{"rate": 57,"customers": 946},{"rate": 99,"customers": 1772},{"rate": 20,"customers": 2168},{"rate": 100,"customers": 754},{"rate": 40,"customers": 121},{"rate": 51,"customers": 2412},{"rate": 15,"customers": 2364},{"rate": 32,"customers": 2161},{"rate": 55,"customers": 1506},{"rate": 29,"customers": 986},{"rate": 0,"customers": 698},{"rate": 4,"customers": 1285},{"rate": 22,"customers": 2108},{"rate": 17,"customers": 2081},{"rate": 79,"customers": 251},{"rate": 48,"customers": 258},{"rate": 41,"customers": 1541},{"rate": 35,"customers": 1132},{"rate": 86,"customers": 1213},{"rate": 1,"customers": 1936},{"rate": 51,"customers": 1737},{"rate": 5,"customers": 2447},{"rate": 60,"customers": 305},{"rate": 37,"customers": 776},{"rate": 64,"customers": 886}];
var chart = AmCharts.makeChart("chartdiv", {
type: 'xy',
addClassNames: true,
autoMargins: false,
marginLeft: 67,
marginBottom: 55,
graphs: [{
//balloonFunction,
bullet: 'round',
xField: 'customers',
yField: 'rate',
bulletSize: 16,
lineAlpha: 0, //for testing only
lineColorField: 'color',
}],
valueAxes: [
{
title: "Rate (%)",
borderThickness: 0,
axisThickness: 2,
maximum: 110,
minimum: -10,
labelFunction: (e,val) => { return (val > 100 || val < 0 ? "" : val + "%"); },
},
{
title: "Customers",
position: 'bottom',
axisAlpha: 0,
borderThickness: 0,
axisThickness: 0,
gridThickness: 0,
},
],
dataProvider: data,
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
If you want to remove the extra grid lines from the additional points generated by the new minimum and maximum, you'll have to use guides as your grid lines and labels instead of the ones auto-generated by the chart. For example:
valueAxes: [{
guides: [{
"value": 0,
"label": "0%",
"lineAlpha": .2,
"tickLength": 5
},
// repeat for each tick/grid line
],
"gridAlpha": 0,
"tickLength": 0,
"labelsEnabled": false,
// ...
Demo:
var data = [{"rate": 99, "customers": 2421},{"rate": 76,"customers": 100},{"rate": 68,"customers": 1711},{"rate": 38,"customers": 313},{"rate": 94,"customers": 393},{"rate": 57,"customers": 946},{"rate": 99,"customers": 1772},{"rate": 20,"customers": 2168},{"rate": 100,"customers": 754},{"rate": 40,"customers": 121},{"rate": 51,"customers": 2412},{"rate": 15,"customers": 2364},{"rate": 32,"customers": 2161},{"rate": 55,"customers": 1506},{"rate": 29,"customers": 986},{"rate": 0,"customers": 698},{"rate": 4,"customers": 1285},{"rate": 22,"customers": 2108},{"rate": 17,"customers": 2081},{"rate": 79,"customers": 251},{"rate": 48,"customers": 258},{"rate": 41,"customers": 1541},{"rate": 35,"customers": 1132},{"rate": 86,"customers": 1213},{"rate": 1,"customers": 1936},{"rate": 51,"customers": 1737},{"rate": 5,"customers": 2447},{"rate": 60,"customers": 305},{"rate": 37,"customers": 776},{"rate": 64,"customers": 886}];
var chart = AmCharts.makeChart("chartdiv", {
type: 'xy',
addClassNames: true,
autoMargins: false,
marginLeft: 67,
marginBottom: 55,
graphs: [{
//balloonFunction,
bullet: 'round',
xField: 'customers',
yField: 'rate',
bulletSize: 16,
lineAlpha: 0, //for testing only
lineColorField: 'color',
}],
valueAxes: [
{
title: "Rate (%)",
borderThickness: 0,
axisThickness: 2,
maximum: 110,
minimum: -10,
guides: [{
value: 0,
label: "0%",
lineAlpha: .2,
tickLength: 5
},{
value: 20,
label: "20%",
lineAlpha: .2,
tickLength: 5
},{
value: 40,
label: "40%",
lineAlpha: .2,
tickLength: 5
},{
value: 60,
label: "60%",
lineAlpha: .2,
tickLength: 5
},{
value: 80,
label: "80%",
lineAlpha: .2,
tickLength: 5
},{
value: 100,
label: "100%",
lineAlpha: .2,
tickLength: 5
}],
gridAlpha: 0,
tickLength: 0,
labelsEnabled: false
},
{
title: "Customers",
position: 'bottom',
axisAlpha: 0,
borderThickness: 0,
axisThickness: 0,
gridThickness: 0,
},
],
dataProvider: data,
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
I`m beginner using kendo stacked chart.
this is my categoryAxis.
categoryAxis: {
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],
majorGridLines: {
visible: true
},
visible: true
},
chartArea: {
height : 200
},
tooltip: {
visible: true,
format: "{0}",
template: "#= series.name #: #= value #",
color: "white"
}
but, 0 index tooltip shows 'd'.
what is the problem ?
tooltip image
From your image you are using a shared tooltip, so try defining your tooltip like this:
tooltip: {
visible: true,
sharedTemplate: "<div>#: category #</div> # for (var i = 0; i < points.length; i++) { # <div>#: points[i].series.name# : #: points[i].value #</div> # } #",
color: "white",
shared: true
}
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.
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')
{