Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Labels cut off in chart

See original GitHub issue

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

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

Issue Analytics

  • State:open
  • Created 9 years ago
  • Comments:27 (6 by maintainers)

github_iconTop GitHub Comments

gopetercommented, May 8, 2014

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


mervinvacommented, Mar 13, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Solved: Chart Text Getting Cut off - Power Platform Community
Solved: all my chart text texts get cut off. ... Option 1 - Increase height of chart control until all the labels fit...
Read more >
Solved: Y axis labels cut off in barchart
Solved: Of course I have limited space on my dashboard but I'd like to see the axis of my barchart. Can I adjust...
Read more >
X-axis labels not completely showing in chart - Mr. Excel
Hello, I have a chart that I am trying to create but my x-axis labels will not completely show up. It works perfectly...
Read more >
Report labels cut off in bar chart - ServiceNow Community
Hi, We have bar chart that we are creating but the issue is that the report labels cut off in bar chart ,...
Read more >
python - How to stop the x-axis labels from getting cut off from ...
You can try plt.tight_layout() . · Neither of them have any effect on the final graph. Mar 12, 2020 at 16:43 · When...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found