How to use nested json values in c3 chart | Jquery

Question

I need to show product sales data of two years. But data is more then it should be. As you can see this is the desired out i want, for now it is static.

http://prntscr.com/of4gby

This is the fiddle, which i have been tried till now. I have tried nested values but it shows me nothing. In 2018 i have given only single value as json object to test if it works or not. Although i have also tried by giving all nested values

 var comaprechart = c3.generate({
            bindto: '#' + chartid,
            data: {
                x: "x",
                xSort: false,
                columns: [
                    ["x", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    ["2018", {
                            "Total Revenue" : "$1,500.00",
                            "Units Sold": "100",
                            "Units Purchased" : "150"
                        }, 20, 30, 20, 10, 20, 30, 20, 10, 20, 30, 20],
                    // ["20118", 30, 10, 20, 30, 30, 10, 20, 30, 20, 10, 25, 15],
                    ["2019", 20, 30, 10, 10, 20, 40, 10, 24, 34, 14, 24, 10]
                ],
                type: 'spline',
                regions: cregions
            }, color: {
                pattern: ["#9edefd", "#7C9EE5", "#2e97ff"]
            },
            axis: {
                x: {
                    type: "category",
                    tick: {
                        outer: false,
                        fit: true,
                        centered: true,
                    },
                    lines: {
                        show: true
                    },
                    label: {
                        text: 'Month',
                        position: 'outer-center',
                    }
                },
                y: {
                    tick: {
                        outer: false,
                        format: function (d) { return d; }
                    },
                    label: {
                        text: 'Units Sold',
                        position: 'outer-middle'
                    }
                }
            },
            size: { width: 400, height: 250 },
            tooltip: {
                format: {

                },
                contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
                    // console.log(d);
                    var $$ = this, config = $$.config,
                        titleFormat = config.tooltip_format_title || defaultTitleFormat,
                        nameFormat = config.tooltip_format_name || function (name) { return name; },
                        valueFormat = config.tooltip_format_value || defaultValueFormat,
                        text, i, title, value, name, bgcolor;
                    for (i = 0; i < d.length; i++) {

                        if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }

                        if (! text) {
                            title = titleFormat ? titleFormat(d[i].x) : d[i].x;
                            console.log(title);
                            text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2' class='hide'>" + title + "</th></tr>" : "");
                        }


                        name = nameFormat(d[i].name);
                        value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
                        bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);

                        text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
                        text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
                        text += "<td class='value'><tr><td>Revenue</td><td>$1,50" + [i] + ".00</td><tr><td>Units Sold</td><td>" + value + "</td><tr><tr><td>Units Purchased: </td><td>150</td></tr>";
                        text += "</tr>";
                    }
                    return text + "</table>";
                }

            },
            legend: {
                show: false
            }
        });


    }

The expected output i want is to show

"Total Revenue" : "$1,500.00", "Units Sold": "100", "Units Purchased" : "150"

under 2018 and same for 2019, Like in the image below. For now it just show single value only.

This is the output i want

Answer 1

Somehow i have managed to show tool-tip in manner i want. Hope this will help someone in future as well. First of all, i have formatted my data in following way.

var ss = {
        "xval": ["x", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "2018": {
            "unit_solds": [29, 22, 33, 44, 55, 66, 77, 88, 99, 10, 8, 10],
            "revenue": [1500, 1600, 1200, 1234, 2134, 1234, 4567, 2345, 1232, 3467, 2345, 1100],
            "units_purchased": [150, 160, 120, 123, 213, 123, 456, 234, 123, 346, 235, 110],
        },
        "2019": {
            "unit_solds": [35, 21, 30, 34, 35, 26, 67, 82, 79, 18, 28, 60],
            "revenue": [1530, 1620, 1230, 1204, 2034, 1267, 4467, 2145, 2232, 3167, 1345, 1200],
            "units_purchased": [153, 162, 123, 120, 203, 121, 256, 334, 423, 146, 335, 210],
        }
    };

This helped me in mapping data, so all result showed under selected year. This is the link of updated fiddle

updated fiddle