在 c3js 图表中重叠类别轴标签文本

Question

如果 c3js 图表中的类别轴标签文本很长或有多个单词，它们会重叠并使其不可读，是否有任何配置或技巧可以解决此问题？

复制并粘贴以下代码以重现此错误。

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']
    }
  }
});

Answer 1

我在axis_x_tick下的'multiline'配置中找到了解决方案，如下所示：-

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

Working example- multiline axis label disabled

在 c3js 图表中重叠类别轴标签文本

Overlapping category axis label text in c3js charts

javascript

d3.js

charts

c3.js