Home forums Using CanvasJS The graph loses the centering – a strange right margin

This topic contains 5 replies, has 2 voices, and was last updated by  Priyanka M S 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #22524

    d3bsky
    Member

    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.

    This look good:

    It looks bad

    What could be the cause of the problem? Regards!

    • This topic was modified 2 months, 2 weeks ago by  d3bsky.
    #22528

    Priyanka M S
    Member

    @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

    #22544

    d3bsky
    Member

    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.

    Problem

    #22554

    Priyanka M S
    Member

    @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

    #22605

    d3bsky
    Member

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

    #22624

    Priyanka M S
    Member

    @d3bsky,

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

    __
    Priyanka M S
    Team CanvasJS

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.