如何在c3js条形图中获得圆角

Question

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?

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