Custom C3JS legend. How can I add text and new lines?

Question

The title is clear. I have 9 data, I need data 1 in the first line of the legend, then a line with text in the 2nd line, and then the rest of the data in the 3rd line (see image).

var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 30],
            ['data2', 130],
            ['data3', 230],

            ['data4', 120],
            ['data5', 50],
            ['data6', 20],

            ['data7', 30],
            ['data8', 130],
            ['data9', 230]
        ],
        type: 'bar',
    },
    grid: {
        y: {
            lines: [{value:0}]
        }
    }
});

https://jsfiddle.net/vL23rbkz/9/

What I need:

Answer 1

In the doc of the c3.js is an example custom legend which can help you. It's looks like you are disabeling the default legend over the show:false property but after that you have full power over how you want to have your legend. Good luck :)