Round corners of c3.js bar chart http://jsfiddle.net/5hzxegxx/27/
// --------------- Overrides to get rounded corner is bar charts ------------------
c3.chart.internal.fn.additionalConfig = {
bar_radiusAll: false,
bar_radius: 5,
tooltip_format_color: undefined
};
c3.chart.internal.fn.isOrderDesc = function () {
var config = this.config;
if(this.isFunction(config.data_order)) {
return false;
}else {
return config.data_order && config.data_order.toLowerCase() === 'desc';
}
};
c3.chart.internal.fn.isOrderAsc = function () {
var config = this.config;
if(this.isFunction(config.data_order)) {
return false;
}else {
return config.data_order && config.data_order.toLowerCase() === 'asc';
}
};
c3.chart.internal.fn.generateDrawBar = function (barIndices, isSub) {
var $$ = this, config = $$.config,
getPoints = $$.generateGetBarPoints(barIndices, isSub);
return function (d, i) {
// 4 points that make a bar
var points = getPoints(d, i),
groups = config.data_groups,
path = '';
// switch points if axis is rotated, not applicable for sub chart
var indexX = config.axis_rotated ? 1 : 0;
var indexY = config.axis_rotated ? 0 : 1;
var bar_radius = config.bar_radius;
var bar_radiusAll = config.bar_radiusAll;
if(groups && groups.length>0) {
var lastGrps = [];
groups.forEach(function(group){
lastGrps.push(group[group.length-1]);
});
//if(points[0][1] < points[1][1] || points[0][0] > points[1][0] ) {
// bar_radius = bar_radius*-1;
//}
if((points[0][1] === points[1][1]) && (points[1][1]=== points[2][1]) && (points[2][1] === points[3][1]) ||
(points[0][0] === points[1][0]) && (points[1][0]=== points[2][0]) && (points[2][0] === points[3][0])){
path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
'L' + points[1][indexX] + ',' + (points[1][indexY]) + ' ' +
'L' + (points[2][indexX]) + ',' + points[2][indexY] + ' ' +
'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
'z';
return path;
}
if(lastGrps.indexOf(d.id) > -1 && (config.data_order === null)) {
if(config.axis_rotated) {
path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
'L' + (points[1][indexX]-bar_radius) + ',' + points[1][indexY] + ' ' +
'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + points[1][indexX] + ',' + (points[1][indexY]+bar_radius) + ' ' +
'L' + points[2][indexX] + ',' + (points[2][indexY]-bar_radius) + ' ' +
'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + (points[2][indexX]-bar_radius) + ',' + points[2][indexY] + ' ' +
'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
'z';
}else {
path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
'L' + points[1][indexX] + ',' + (points[1][indexY]+bar_radius) + ' ' +
'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + (points[1][indexX]+bar_radius) + ',' + points[1][indexY] + ' ' +
'L' + (points[2][indexX]-bar_radius) + ',' + points[2][indexY] + ' ' +
'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + points[2][indexX] + ',' + (points[2][indexY]+bar_radius) + ' ' +
'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
'z';
}
}else {
if(bar_radiusAll) {
path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
'L' + (points[1][indexX]+bar_radius) + ',' + (points[1][indexY]) + ' ' +
'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + (points[1][indexX]) + ',' + (points[1][indexY]+bar_radius) + ' ' +
'L' + (points[2][indexX]) + ',' + (points[2][indexY]-bar_radius) + ' ' +
'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + (points[2][indexX]+bar_radius) + ',' + (points[2][indexY]) + ' ' +
'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
'z';
}else {
path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
'L' + points[1][indexX] + ',' + (points[1][indexY]) + ' ' +
'L' + (points[2][indexX]) + ',' + points[2][indexY] + ' ' +
'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
'z';
}
}
}else {
/*path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
'L' + points[1][indexX] + ',' + (points[1][indexY]) + ' ' +
'L' + (points[2][indexX]) + ',' + points[2][indexY] + ' ' +
'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
'z';*/
if(config.axis_rotated) {
path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
'L' + (points[1][indexX]-bar_radius) + ',' + points[1][indexY] + ' ' +
'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + points[1][indexX] + ',' + (points[1][indexY]+bar_radius) + ' ' +
'L' + points[2][indexX] + ',' + (points[2][indexY]-bar_radius) + ' ' +
'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + (points[2][indexX]-bar_radius) + ',' + points[2][indexY] + ' ' +
'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
'z';
}else {
path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' +
'L' + points[1][indexX] + ',' + (points[1][indexY]+bar_radius) + ' ' +
'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + (points[1][indexX]+bar_radius) + ',' + points[1][indexY] + ' ' +
'L' + (points[2][indexX]-bar_radius) + ',' + points[2][indexY] + ' ' +
'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + points[2][indexX] + ',' + (points[2][indexY]+bar_radius) + ' ' +
'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' +
'z';
}
}
return path;
};
};
// ----------------------------- End -------------------------------
var chart = c3.generate({
bindto: '#chart',
padding: {
left: 200,
right: 100,
top: 20,
bottom: 20
},
data: {
x: 'x',
labels: true,
columns: [
['data1',40, 30, 200, 100, 400, 150, 250, 50, 100, 250,67,190,48,123,76,54,254],
['x','Travel and Hospitality','Life Science and Pharma', 'Saas and Cloud', 'Hi-tech Manufacturing', 'Software', 'Business Services', 'Govt/Public Sector', 'Energy', 'Manufacturing', 'Healthcare','Media','Internet','Retail','Biotech','Automobile','Consumer Goods','Financial Services']
],
type: 'bar'
},
axis: {
rotated: true,
x: {
type: 'category',
tick:{
multiline: false
}
}
},
legend: {
show: false
},
tooltip: {
show: false
},
bar: {
width: {
ratio: .7
},
spacing: 2
}
});