c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.34k stars 1.39k forks source link

Issue in multiline xAxis label positioning when using axis.x.rotate #2654

Open panthony opened 5 years ago

panthony commented 5 years ago

When loading new data, the xAxis label is badly positioned when using rotate option.

See http://jsfiddle.net/m9c8qpd2/

The issue is here:

AxisInternal.prototype.updateTickTextCharSize = function (tick) {
    var internal = this;
    if (internal.tickTextCharSize) {
        return internal.tickTextCharSize;
    }
    var size = {
        h: 11.5,
        w: 5.5
    };
    tick.select('text').text(function(d) { return internal.textFormatted(d); }).each(function (d) {
        var box = this.getBoundingClientRect(),
            text = internal.textFormatted(d),
            h = box.height,
            w = text ? (box.width / text.length) : undefined;
        if (h && w) {
            size.h = h;
            size.w = w;
        }
    }).text('');
    internal.tickTextCharSize = size;
    return size;
};

We are recomputing the "text char size" using the box's height whereas this is false when the box is rotated.