CODEWITHSUNDEEP
c3
TJR
TJR

Reputation: 6577

C3Js graph x-Axis is displaying outside of graph

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.

enter image description here

Is there any way to prevent this ugly display error ?

Upvotes: 2

Views: 767

Answers (1)

Eskandar
Eskandar

Reputation: 21

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/

Upvotes: 2

Related Questions