How to get rounded corner for grouped bar chart(stack chart) in c3.js

Question

Please help me add rounded corner for stacked chart(grouped bar chart) in c3.js.

I have found something similar here How to get rounded columns in c3.js bar chart but this is the normal bar chart. It is not working for stacked chart. I'm not familiar with d3.js. Thank you :)

This is my code.

    var chart = c3.generate({
        bindto: "#id",//element
        padding: {
            left: 50,
            right: 50,
            top: 20,
            bottom: 20
        },
        data: {
            // x : 'x',
            columns: [//Data Arry
                ['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
                ['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
                ['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],

            ],
            type: 'bar',
            groups: [
                ['data1', 'data2', 'data3']//grouping data to get stacked chart
            ],

        },
        bar: {
            width: {
                ratio: .6 //setting width of bar
            },
            spacing: 2//setting space between bars
        },

        grid: {
            y: {//grid lines
                show: true,
                color:'red'
            }
        },


        axis: {

            x: {
                type: 'category',
                tick: {
                    rotate: -90,
                    multiline: false,
                    format: "%b"                   //format: "%e %b %y"
                },

                height: 50,
                categories: ['2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017'] //Xaxis labels
            },
            y2: {
                show: false
            },
            y: {
                tick: {
                    format: d3.format("s")//format y axis
                }
            }

        },
        color: {
            pattern: ['#fc7f86', '#34dfe2', '#dc92fa', '#43daa1'] //color code
        }
    });

Answer 1

Set Data order as null

 data: {

                columns: [
                    ['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
                    ['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
                    ['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],

                ],
                type: 'bar',
                groups: [
                    ['data1', 'data2', 'data3']
                ],
                order: null

            },