c3.js 图表上的数据图标签被截断

Question

我正在 c3.js 折线图上画一些线，但最左边的数据标签被截掉了：

我试过向图表添加填充，但这只会向整个图表添加填充。我需要的是一些方法来为条形图刻度添加某种填充。

我考虑过的事情：

我考虑过使用 "transform" 属性:

.c3-texts .c3-text text {
  transform: translate(10px, 0);
}

但是将所有数据标签的位置向右移动最终会导致图表右侧的数据标签被截断。

这是一个标签被截断的简单示例：

fiddle

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250]
        ],

        labels: {
         format: function(x){
             return "Test Label"
         }
        }
    }
});

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

@ksav 为我指明了正确的方向。我记得以前试过这个，但愚蠢的是，我没有想到放十进制数。我曾尝试输入值 1，但填充过多，但执行以下操作非常有效：

axis: {
  x: {
    padding: {
      left: 0,
      right: 0,
    }
  }
}

c3.js 图表上的数据图标签被截断

Data graph labels cut off on c3.js chart

javascript

css

linegraph

d3.js

c3.js