How to draw Normalize Stack chart using C3 chart? - c3.js

Question

I want to draw normalize chart using C3 Chart library.
my current code is
var chart = c3.generate({
bindto: '#column-chart-main',
size: {
height: $('.chart-area').height()
},
data: {
rows:
chartFinalData
,
type: 'bar',
labels: {
format: d3.format('%')
},
colors: chartFinalColors,
transition: {
duration: 100
}
},
zoom: {
enabled: true
},
axis: {
y: {
show: false,
max: 1,
min: 0,
padding: {bottom:0}
},
x: {
type: 'category',
categories: chartFinalBrands
},
rotated: setChartType
},
tooltip: {
format: {
value:d3.format('%')
}
},
legend: {
show: $scope.chartTrans.showHideLegends,
position: 'inset',
inset: {
anchor: legendPosition,
x: 10,
y: 10,
step: legendSteps,
}
}
});
Above code generate simple bar stack chart.
but i need normalize bar stack chart
my current chart is - current-chart
i need chart as per - required-chart
Thanks in advance

Answer 1

If you want a normalised stack bar chart then you need to normalise the data first, c3 doesn't have a chart setting itself to work that out
e.g.
var data = [
['data1', 30, 200, 200, 400, 150, 250],
['data2', 130, 100, 100, 200, 150, 50],
['data3', 230, 200, 200, 300, 250, 250]
]
;
// Normalise
var scount = data.length;
for (var n = 1; n < data[0].length; n++) {
var total = 0;
for (var m = 0; m < scount; m++) {
total += data[m][n];
}
var ratio = 1.0 / total;
for (var m = 0; m < scount; m++) {
data[m][n] *= ratio;
}
}
var chart = c3.generate({
data: {
columns: data,
type: 'bar',
groups: [
['data1', 'data2', 'data3']
]
},
tooltip: {
format: {
value:d3.format('%')
}
},
axis : {
y : {
//max: 0.95, // for some reason this shows the last tick y as 100%, while 1.0 makes the last y tick 110%, don't know why
// thanks to a.n.onymous who figured out this worked better
max: 1,
padding: 0,
tick: {
format: d3.format("%")
}
}
}
});
http://jsfiddle.net/697p6hw5/6/