如何在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

            },