C3Js graph x-Axis is displaying outside of graph

Question

The X-Axis labels are moving to the left outside of the graph when I am zooming in and/or slide the graphs content to right or left.

On this image you can see that the label (05.08) is outside on the left.

Is there any way to prevent this ugly display error ?

Answer 1

Kinda late answer.

I've solved the same issue by redefining c3 core functions getXAxisClipX and getXAxisClipWidth to the following

c3.chart.internal.fn.getXAxisClipX = function() {
  var $$ = this;
  return $$.getAxisClipX(!$$.config.axis_rotated) + Math.max(30, $$.margin.left);
};

c3.chart.internal.fn.getXAxisClipWidth = function() {
  var $$ = this;
  var chartMargin = $$.margin;
  return $$.getAxisClipWidth(!$$.config.axis_rotated) -
    Math.max(30, chartMargin.left) -
    Math.max(30, chartMargin.right);
};

Here is the example https://jsfiddle.net/vhpzma97/