Is it possible to load a new y-axis label for c3.js?

Question

I'm using AJAX to keep loading new data into a c3.js chart. One of the things I want to change in the y-axis label. Take this for example:

var chart = c3.generate({
    data: {
        x : 'x',
        columns: [
            ['x', 'www.site1.com', 'www.site2.com', 'www.site3.com', 'www.site4.com'],
            ['download', 30, 200, 100, 400],
            ['loading', 901, 100, 140, 200],
        ],
        groups: [
            ['download', 'loading']
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'category' // this needed to load string x value
        },
        y: {
            label: {
                text: 'Y-Axis #1',
                position: 'outer-middle'
            }
        }
    }
});

setTimeout(function () {
    chart.load({
        columns: [
            ['x', 'www.siteA.com', 'www.siteB.com', 'www.siteC.com', 'www.siteD.com'],
            ['download', 130, 200, 150, 350],
            ['loading', 190, 180, 190, 140],
        ],
        axis: {
            y: {
                label: {
                    text: 'Change Y-Axis text to this',
                    position: 'outer-middle'
                }
            }
        }             
    });
}, 1000);

Whenever this runs, only the y-axis label 'Y-Axis #1' shows up. The y-axis I want to load in this case 'Change Y-Axis text to this' does not show up. Even if I comment out this

y: {
    label: {
        text: 'Y-Axis #1',
        position: 'outer-middle'
    }
}

then no y-axis label even shows up. This leads me to believe that either a new y-axis label cannot be loaded, or I'm doing it wrong.

I tried a different approach and got the actual element itself:

<text class="c3-axis-y-label" transform="rotate(-90)" x="-278" dx="0" dy="-38" style="text-anchor: middle;">Y-Axis #1</text>

I tried changing it with jQuery

$(".c3-axis-y-label").text('lol');

But to no avail, it did not work, because I think this only works with spans.

Can anyone help me out?

Answer 1

You can change the y-axis as so, it's a different syntax to setting it up originally. There does appear to be an issue that trying to change it immediately after a chart.load doesn't work, but it does before and in isolation. I suspect the chart.load is perhaps asynchronous and restoring the previous label upon completion.

var chart = c3.generate({
    data: {
        x : 'x',
        columns: [
            ['x', 'www.site1.com', 'www.site2.com', 'www.site3.com', 'www.site4.com'],
            ['download', 30, 200, 100, 400],
            ['loading', 901, 100, 140, 200],
        ],
        groups: [
            ['download', 'loading']
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'category' // this needed to load string x value
        },
        y: {
            label: {
                text: 'Y-Axis #1',
                position: 'outer-middle'
            }
        }
    }
});

setTimeout(function () {
    chart.axis.labels({y: 'New Y Axis Label'});
    chart.load({
        columns: [
            ['x', 'www.siteA.com', 'www.siteB.com', 'www.siteC.com', 'www.siteD.com'],
            ['download', 130, 200, 150, 350],
            ['loading', 190, 180, 190, 140],
        ],
    });

}, 1000);

setTimeout(function () {

    chart.load({
        columns: [
            ['x', 'www.siteA.com', 'www.siteB.com', 'www.siteC.com', 'www.siteD.com'],
            ['download', 130, 220, 150, 350],
            ['loading', 190, 180, 190, 140],
        ],
    });
    chart.axis.labels({y: 'New Y Axis Label 2'});
}, 2000);

setTimeout(function () {
    chart.axis.labels({y: 'New Y Axis Label 3'});
}, 4000);