How To Get Rounded Columns In C3.js Bar Chart

I was wondering if anyone know how to round the corners of the columns in a c3.js bar chart? The hacks I have found online, doesn't seem to work, so I hope somewhere here can help!

Solution 1:

I have tried it for simple bar charts, which provides bars with rounded corner as shown below:-

Here is the jsFiddle:- jsFiddle: Rounded bar charts

.c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid, .c3-event-rect, .c3-bars path {
    shape-rendering: auto;
 }

You need to basically override certain c3.js functions and provide logic for getting rounded corner by providing multiple points near the corner.

Otherwise all bars in a bar chart are polygons with 4 points. Solution is to provide bars with more points.