C3.js 横轴标签单行显示失效问题的正确配置方法

c3.js 中 `axis.x.tick.multiline: false` 无法生效，是因为配置位置错误；必须将其嵌套在 `axis.x` 内部而非 `axis` 顶层，本文详解正确写法、原理及兼容性注意事项。

在使用 C3.js 创建横向柱状图（rotated: true）时，常需强制横轴分类标签（categories）以单行形式显示，避免自动换行截断长文本。官方文档虽注明 tick.multiline: false 可禁用多行渲染，但若该配置置于 axis 根级（如 axis: { tick: { multiline: false } }），C3.js 将完全忽略该设置——这是因 C3 的配置解析机制要求 tick 相关选项必须与具体坐标轴（x 或 y）深度绑定。

✅ 正确配置方式是将 tick.multiline: false 严格置于 axis.x 对象内部，与其他 x 轴属性（如 type、categories）同级：

axis: {
  x: {
    type: 'category',
    categories: [
      "test looooooong string no multiline",
      "string 2"
    ],
    tick: {
      multiline: false  // ✅ 必须在这里！
    }
  },
  rotated: true
}

⚠️ 注意事项：

快剪辑

国内⼀体化视频⽣产平台

下载

• multiline: false 仅对 category 类型的 x 轴生效；数值型或时间型轴不支持此配置。
• 在 C3.js v0.4.x（如示例所用 v0.4.10）中，该配置依赖底层 D3 v3 的 文本布局逻辑，若标签过长超出 SVG 容器宽度，仍可能被视觉裁剪——此时需配合 axis.x.height 或外层容器 overflow: visible 优化。
• 推荐为长文本标签添加 white-space: nowrap CSS 强制（虽非必需，但可增强兼容性）：

  .c3-axis-x .tick text {
    white-space: nowrap;
  }

完整可运行示例（修正后）：

var graph = c3.generate({
  bindto: "#chart",
  data: {
    columns: [
      ["name1", "5.00", "3.00"],
      ["name2", "3", "2"]
    ],
    type: 'bar',
    colors: {
      "name1": "#00ff00",
      "name2": "#0000ff"
    }
  },
  bar: { width: 10 },
  axis: {
    x: {
      type: 'category',
      categories: [
        "test looooooong string no multiline",
        "string 2"
      ],
      tick: { multiline: false } // ? 关键修正点
    },
    rotated: true
  },
  padding: { bottom: 20 },
  title: { text: 'titolo' }
});

总结：C3.js 配置具有严格的层级敏感性。tick 子配置项（如 multiline、count、fit）必须声明在对应坐标轴（axis.x 或 axis.y）作用域内，否则会被静默丢弃。养成“按坐标轴组织 tick 配置”的习惯，可避免多数标签渲染异常问题。