如何去除c3.js中多余内边距与间距，让图表贴合div容器？

要让C3.js生成的折线图彻底移除所有间距，完全贴合所在的div，无需手动修改svg的viewBox，直接通过C3的配置项即可实现，具体操作如下：

• 移除图表内外边距
  在配置中把所有padding设为0，同时关闭默认的边距计算逻辑：

  var chart = c3.generate({
      padding: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
      },
      legend: {
          padding: 0 // 清除图例内边距
      },
      axis: {
          x: {
              padding: {left: 0, right: 0}, // 移除X轴左右空白
              tick: {
                  outer: false // 隐藏X轴刻度外延伸线
              }
          },
          y: {
              padding: {top: 0, bottom: 0}, // 移除Y轴上下空白
              tick: {
                  outer: false // 隐藏Y轴刻度外延伸线
              }
          }
      }
  });
  

• 隐藏冗余元素（按需操作）
  如果不需要坐标轴或图例，直接隐藏它们来彻底消除相关空白：

  axis: {
      x: {show: false},
      y: {show: false}
  },
  legend: {show: false}
  

• 强制图表尺寸匹配容器
  先给div容器设置明确的宽高，再让C3图表尺寸完全匹配容器：

  #chart-container {
      width: 100%;
      height: 300px; /* 替换为你需要的固定高度 */
      overflow: hidden;
  }
  

  同时在C3配置中设置size：

  size: {
      width: document.getElementById('chart-container').offsetWidth,
      height: document.getElementById('chart-container').offsetHeight
  }
  

• 清除SVG默认边距
  如果仍有细微空白，直接给生成的SVG加样式：

  #chart-container svg {
      margin: 0;
      padding: 0;
      display: block;
  }
  

这些配置会覆盖C3默认的边距和留白设置，让图表完全填充所在的div容器，不需要手动修改viewBox属性。

内容的提问来源于stack exchange，提问作者ifzalkola