Overlapping category axis label text in c3js charts

2
votes

If category axis label text is long or multiple words in a c3js chart, they are overlapping and makes it unreadable, is there any config or hack to fix this issue?

c3js category axis label text overlapping

c3js category axis example

Copy and paste following code to reproduce this bug.

var chart = c3.generate({
  data: {
    columns: [
        ['data1',40, 30, 200, 100, 400, 150, 250, 50, 100, 250,67,190,48,123,76,54,254]
    ]
  },
  axis: {
    rotated: true,
    x: {
        type: 'category',
        categories: ['Travel and Hospitality','Life Science and Pharma', 'Saas and Cloud', 'Hi-tech Manufacturing', 'Software', 'Business Services', 'Govt/Public Sector', 'Energy', 'Manufacturing', 'Healthcare','Media','Internet','Retail','Biotech','Automobile','Consumer Goods','Financial Services']
    }
  }
});
1
javascriptd3.jschartsc3.js
Have you tried adjusting the height and top margin of the graph? - jpcanamaque
Yes, margin doesn't have any visible change on the chart, but by setting padding there is some changes, but overlap issue still persists. - Chetan

1 Answers

4
votes

I found the solution in the 'multiline' config under axis_x_tick as shown below:-

axis: {
    rotated: true,
    x: {
        tick: {
            multiline: false,
        },
        type: 'category',
    }
 }

Working example- multiline axis label disabled