C3: X axis padding not working

[guatedude2]

On the x axis, adding padding left or right has little or no effect.

See example:
http://jsfiddle.net/m68vzrkw/1/

Unrelated to that, how can one change the color opacity of the scatter plot?

[su-docker]

That is because the given padding is used as domain value. This means, your timeseries chart will take it as 20 milliseconds which does not have any effect :)

If you give a big number like 20000000, you can see the effect.

But, I think there should be a better way to give this padding. May be an option to give it as pixels directly

[michaelrodov]

Need to provide an option to have xaxis margin in px

[geofreyflores]

+1

[ssc-hrep3]

As a workaround, you can use the following snippet together with moment.js:

var dates = [...];
dates = dates.sort(function(a, b) {
    if(moment(a).isBefore(moment(b))) {
        return -1;
    } else if(moment(b).isBefore(moment(a))) {
        return 1;
    } else {
        return 0;
    }
});
var start = moment(dates[0]);
var end = moment(dates[dates.length - 1]);
var duration = moment.duration(end.diff(start)).asMilliseconds();

// 5% of the full width is the padding on the left
var padding = Math.round(duration * 0.05);

This snippet is useful for relative (%) padding. If you want to have an absolute padding, you need to read in the width of the chart.

[halimb]

another workaround:

var xAxisClipRectangle = document.querySelector('#my-chart [id$=clip-xaxis] rect');
xAxisClipRectangle.setAttribute('x', 0);
xAxisClipRectangle.setAttribute('width', container.offsetWidth - 50);

the xAxisClipRectangle element is an svg rectangle used to determine the visible part of the x axis group. changing the x and width attributes of that rectangle allows some control over x axis visibility (as a workaround for padding)