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!

Thank you :)

        var mph_chart = c3.generate({
            bindto: '#mph_chart',
            padding: {
                top: 10,
                right: 50,
                bottom: 10,
                left: 190
                    },
            bar: {
                width: 35,
            },
            color: {
                pattern: ['#3366ff']
            },
            data: {
                x: 'x',
                labels:true,
                columns: [
                    ['x', 'Porsche Macan','Porsche Macan S','Porsche Macan S Diesel','Porsche Macan Turbo','Porsche Macan GTS'],
                    ['0-62 mph in seconds', 6.7, 5.4, 6.3, 4.8, 5.2]
                        ],
                type: 'bar',  
                    },
                legend: {
                    show: true
                        },
                axis: {
                    rotated: true,
                        x: {
                            type: 'category',
                            tick: {
                                multiline: false 
                                    } // this needed to load string x value
                            }
                        },
                tooltip: {
                show:false
        },

        bar: {
            width: {
                ration: .7

            },
            spacing: 2
        }
    });

回答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.

来源：https://stackoverflow.com/questions/34475791/how-to-get-rounded-columns-in-c3-js-bar-chart