C3 js : large axis label

Question

For example:

var chart = c3.generate({
    data: {
        x : 'x',
        columns: [
            ['x', 'www.site1.com11111111111111111111111111111111111111111111111111111', 'www.site2.com11111111111111111111111111111111111111111111111111111111', 'www.site3.com11111111111111111111111111111111111111111111111111111111111111', 'www.site4.com11111111111111111111111111111111111111111111111111111111111111111111111111'],
            ['download', 30, 200, 100, 400],
            ['loading', 90, 100, 140, 200],
        ],
        groups: [
            ['download', 'loading']
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'category', // this needed to load string x value
            tick: {
                rotate: 25
            }
        }
    }
})

;

and it looks like

How can I hide the long title while keeping the ability for the user to see the full name (maybe when hovering the mouse). Or maybe better way?

Answer 1

You can change the text with the tick.format configuration, but actually getting the value of the text because these are category values is a bit of a PITA, see the solution below:

the tick.format function shortens the axes label text (and this is carried over into the bar chart tooltip too)

the .onrendered function adds title elements to the axes labels that show the full axes label as a basic tooltip when you mouseover them

var chart = c3.generate({
    data: {
        x : 'x',
        columns: [
            ['x', 'www.site1.com11111111111111111111111111111111111111111111111111111', 'www.site2.com11111111111111111111111111111111111111111111111111111111', 'www.site3.com11111111111111111111111111111111111111111111111111111111111111', 'www.site4.com11111111111111111111111111111111111111111111111111111111111111111111111111'],
            ['download', 30, 200, 100, 400],
            ['loading', 90, 100, 140, 200],
        ],
        groups: [
            ['download', 'loading']
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'category', // this needed to load string x value
            tick: {
                rotate: 25,

                format: function (d) {
                    var catName = this.api.categories()[d];
                    if (catName.length > 20) {
                        catName = catName.slice(0,20)+"…";
                    }
                    return catName;
                }

            },
        }
    },
    onrendered: function () {
        var self = this;
        d3.select(this.config.bindto)
            .selectAll(".c3-axis-x .tick text")
            .each(function (d) {
                var title = d3.select(this).select("title");
                if (title.empty()) {
                    title = d3.select(this).append("title");
                }
                title.text (self.api.categories()[d]);
            })
        ;
    }
});

http://jsfiddle.net/05hsk6yh/