1

I was wondering if there is a way to add right padding to a Timeseries chart on C3.js.

As you can see on this example from C3js.org, the date labels are getting cut off on the right. Or see following picture: enter image description here

Omar Lahlou
  • 1,000
  • 9
  • 33
  • 2
    To solve this, I just add CSS to the element. Alternatively, just make the container that much wider than the chart itself or set `overflow: visible`. – Tony Aug 14 '15 at 19:34
  • 1
    A CSS property... The label is being drawn, it's just being clipped. So the containing div needs to show overflow. – Tony Aug 14 '15 at 22:51

1 Answers1

5

You can use the option padding > right, like so

var chart = c3.generate({
    padding: {
        right: 20
    },
    data: {
    ...

From the documentation at http://c3js.org/reference.html#padding-right

padding.right

The padding on the right of the chart.

Default: undefined

potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • 1
    This worked. Be careful! Add padding the way @potatopeelings did. Don't add it inside `x-axis`, otherwise it won't work – Omar Lahlou Aug 15 '15 at 01:22
  • The x-axis is a time series so the padding is count as milliseconds not as pixels. There is an open issue in the repository: https://github.com/c3js/c3/issues/1128 – Dodger Jul 16 '19 at 10:09