Looks like none of the d3 based charting libraries like nvd3, c3js support rounded corner for bar charts.

I need bars in the bar charts to look like as shown below, with gradient and rounded corners for my project.

Any hack or config to achieve this in c3js?

Looks like none of the d3 based charting libraries like nvd3, c3js support rounded corner for bar charts.

I need bars in the bar charts to look like as shown below, with gradient and rounded corners for my project.

Any hack or config to achieve this in c3js?

• javascript
• d3.js
• charts
• c3.js

• If using d3.js families, each bar of bar chart must be a 'rect' element, and rect element has 'rx' and 'ry' attributes. You can set those attributes to create round corner. – toshi Commented Jan 21, 2015 at 14:22
• No, the svg element used is PATH by c3js – Chetan Commented Jan 21, 2015 at 14:57

1 Answer 1

Need to override c3js function generateDrawBar and provide logic to get rounded corner, generally c3js path element consists of four points corresponding to four corners of the bar.

Now you need to provide logic to have multiple points at the top-left and top-right corners of the par to smoothen the bar corners.

There are still several cases:-

1) rounded corners for stacked bar charts.

2) rounded corners for negative values, bars pointing downwards or opposite direction.

rounded corner bars jsFiddle

rounded corner c3js bar charts snapshot

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
}
});