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

时间:2016-07-28 16:41:04

标签: javascript css d3.js c3.js linegraph

我正在绘制c3.js折线图上的一些线条,但最左边点的数据标签正在被切断:

enter image description here

我尝试在图表中添加填充,但这只是在整个图表中添加了填充。我需要的是一些方法来添加某种填充到条形图滴答。

我考虑过的事情:

我考虑使用“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"
         }
        }
    }
});

任何帮助将不胜感激。谢谢!

1 个答案:

答案 0 :(得分:0)

@ksav指出了我正确的方向。我记得以前尝试过这个,但是愚蠢的是,我没想到输入十进制数字。我曾尝试输入值1,并且它给了太多填充,但执行以下操作非常有效:

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