CODEWITHSUNDEEP
javascriptcssd3.jsc3.jslinegraph
CdSdw
CdSdw

Reputation: 359

Data graph labels cut off on c3.js chart

I'm graphing some lines on a c3.js line chart, but the data label of the leftmost point is being cut off:

enter image description here

I've tried adding padding to the chart, but this just adds padding to the overall chart. What I need is some way to add some sort of padding to just the bar graph ticks.

Something that I've considered:

I've considered using the "transform" property:

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

But moving the position of all the data labels to the right would end up causing the data labels on the right-hand side of the graph to get cut off.

Here's a simple example of labels getting cut off:

fiddle

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

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

Any help would be appreciated. Thanks!

Upvotes: 0

Views: 2402

Answers (1)

CdSdw
CdSdw

Reputation: 359

@ksav pointed me in the right direction. I remember trying this before, but foolishly, I didn't think of putting decimal numbers. I had tried putting in the value 1, and it gave way too much padding, but doing the following worked perfectly:

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

Upvotes: 0

Related Questions