The graph loses the centering – a strange right margin

[d3bsky]

Hello, I’m using Canva JS to display data from a data base that is updated with new records every 6 minutes. Data is displayed only from 24h. The problem is that every now and then a strange space is created on the right side of the chart. I observed the problem by watching the graphs on the phone. Sometimes it is good and sometimes a strange margin is created. In my opinion, this is caused by data of the x-axis which sometimes “protrude” beyond the graph on the right side.

What could be the cause of the problem? Regards!

• This topic was modified 6 years, 2 months ago by d3bsky.

[Priyanka M S]

@d3bsky,

Whenever the labels get clipped at the extremes of the axis, the plot area moves towards the left/right in order to adjust the labels without clipping them.
To avoid this behaviour, you can set labelAutoFit property to false.

If this doesn’t help you, kindly create a jsfiddle reproducing the issue you are facing, so that we can look into the options you are using, understand your code better and help you out.

__
Priyanka M S
Team CanvasJS

[d3bsky]

You’re right, change labelAutoFit to false set the graph in the middle. Thank you. However, the data on the x-axis does not fit because there are a lot of them and overlap. What can I do with this? Below is a photo of the problem.

[Priyanka M S]

@d3bsky,

the data on the x-axis does not fit because there are a lot of them and overlap. What can I do with this?

When labelAutoFit is set to true, labels get auto adjusted without overlapping or clipping them.

However, if you want all the labels to be displayed without overlapping, you can increase the interval of axisX or rotate the labels by setting labelAngle.

__
Priyanka M S
Team CanvasJS

[d3bsky]

How can I change the interval if I have a date in the yyyy-mm-dd hh:mm:ss format?

[Priyanka M S]

@d3bsky,

You can use interval and intervalType to set the interval in day, month, hour etc.

__
Priyanka M S
Team CanvasJS