Labels cut off in chart

[AbeHandler]

I have a bar chart with rotated axes. The labels are a little long and are getting cut off. Here is a live demo:

https://dl.dropboxusercontent.com/spa/juxddtvfvlf51yv/Sample/test.html

Here is the code:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 50, 50, 50, 50]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.25 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    },
    axis: {
        x: {
            type: 'categorized',
            categories: ['City: Police and Fire', 'City: General Fund', 'City: Public Library', 'Board of Liquidation', 'Sewerage and Water Board', 'Audubon Zoo', 'Audubon Aquarium', 'Board of Assessors', 'School Board', 'Levee Board', 'Law Enforcement', 'Economic Development','Parkway and Recreation Department', 'Capital Improvement', 'Street and Traffic Control', 'Police and Fire']
        },
        rotated: true
    }
});

[gopeter]

I had the same problem:

Simply add

padding: {
  left: 500
},

to your chart config. To set a dynamic value, I'm using a little jQuery Plugin that gets the length of a text-string:

$.fn.textWidth = function(text, font) {
  if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
  $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
  return $.fn.textWidth.fakeEl.width();
};

var longest_text_width = 0;
chartData[0].forEach(function(data) {
  var w = $.fn.textWidth(data, '13px Clear Sans');
    if (w > longest_text_width) {
      longest_text_width = w;
    }
});

var chart = c3.generate({

  ...

  padding: {
    left: longest_text_width + 10 // add 10px for some spacing
  },

  ...

});

[AbeHandler]

Thanks. That solved my problem. This library is great -- but you should probably add some kind of auto calculation of the padding in future releases. This is exactly the kind of step you should automate away so that users don't have to think about it anymore.

[masayuki0812]

Hi, I agree. This issue is related to #129 and I'll fix this later. Thanks!

[masayuki0812]

Hi @AbeHandler , I think the issue for automatic padding has been fixed in the latest version 0.1.38. Please try this version.

[ttamminen]

I think there is something fizzy going on with the padding calculation on mobile devices.

If you go to http://c3js.org/ and in Google Chrome Developer Tools -> Toggle Device Mode -> iPhone 3GS (other will do) and press F5. Y-axis values are cut off.

Any ideas how to fix it?

[masayuki0812]

Sorry, c3js.org is not working correctly. I'm planing the fixed version 0.4.10 shortly, then it should work.

[nhducit]

in demo page this problem still exist

[aendra-rininsland]

@nhduc296 I just checked — looks fine to me?

[nhducit]

@aendrew

in demo page http://c3js.org/samples/axes_x_tick_format.html

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01'],
            ['sample', 30, 200, 100, 400, 150, 250]
        ]
    },
    axis : {
        x : {
            type : 'timeseries',
            tick: {
                //format: function (x) { return x.getFullYear(); }
              format: '%d-%m-%Y' // format string is also available for timeseries data
            }
        }
    }
});

[aendra-rininsland]

Ah. Yes indeed, still seems to be an issue with longer titles.

[eregnier]

This issue seems still not solved. This is annoying :/ . Anyone knows how it should be done in a proper way ? Computing padding from total length of labels is still the better solution or is there any better methods ?

[skrzepij]

Any update here?

[abmultimedia]

I'm still seeing this issue when setting a custom tick count. The last tick is being cut off.

[lepolt]

Having the same issue here.

[inlinecoder]

Year 2018.

Can anyone help me, please? With this 'declarative' approach I simply don't know what do :(

(All labels are either overlapped or cropped)

[eregnier]

@inlinecoder maybe rotating your labels may solve your issue: http://c3js.org/samples/axes_x_tick_rotate.html

[inlinecoder]

Of course, we can find some kind of a workaround, but that doesn't solve the global issue.

Atm, I've managed to overcome overlapping and cropping, at least for now.

What I did is just moved nested styles and made them global. I guess, C3 tries to find matching styles and perform some calculations with it; and if some specific style is nested, C3 can't find it, and basically can't perform a proper calculation.

[mervinva]

Any update in this issue ? I am still getting this.

[inlinecoder]

@mervinva can you attach an exact issue you're having, so it's easier to think how to handle it?

[mervinva]

Same issue like the image commented by lepolt above.

[garthgoodson]

Same issue for me... Date/Year labels get truncated. Same issue as lepolt above.

[victorpinheiro]

Still having this issue. Any fix?

[roremeol]

It woks for me

.c3 .c3-axis-x .tick:last-of-type text {
  transform: translate(-8px, 0)!important;
}

[inlinecoder]

@roremeol, that's not a good solution, even if it works.

[roremeol]

@inlinecoder, for now until they fix it, it's the best that i have

[luchnikovs]

Another way. However it probably may cause side effects

svg {
    overflow: visible !important;
}

[Lampent]

Having the same problem, anything new?

[markpalfreeman]

In the instance of y-axis labels getting cut off, is C3 calculating the width of the outer axis section by the first text length in the data set?

To prevent this, it seems like the library should perform the calculation (similar to @gopeter's solution above) for the longest label and base the width on that.