Home Forums Chart Support Chart shrinks inward when scrolling through data and new axis label appears

Chart shrinks inward when scrolling through data and new axis label appears

Viewing 6 posts - 1 through 6 (of 6 total)
  • #21753

    I am working on a program prototype and have noticed a weird issue
    if you look at jsfiddle.net/87jf5m2c
    and press play, you will notice that whenever a new timestamp enters the chart, it seems to shrink to the left temporarily
    I was wondering how I could fix this
    sorry about the messy code

    #21759

    ChristianRemwood,

    As you are shifting the dataPoints(to left) on adding new dataPoints, the axisX labels also get shifted along with the dataPoints. Because of which you might visually feel the chart shrinks. Ideally the chart doesn’t shrink.

    __
    Priyanka M S
    Team CanvasJS

    #21771

    Its only when a new label is added to the chart that the problem appears. about 5-10% of the graph-able area is cut off until the data-point and corresponding label have traveled that 5-10% at which point the full size is restored. At low playback speeds its not too bad, but at quicker speeds its quite jarring. I also wanted to add that the area cut off is proportional to half the size of the label entering the graph.

    #21774

    I have expanded the label size in this JSFiddle to make the issue more visible. https://jsfiddle.net/87jf5m2c/4/

    #21784

    ChristianRemwood,

    When the labelAutoFit property is set to true(by default), it places the labels on axisX such that the labels do not overlap or get clipped, hence pushes the entire label inside the chart causing it to shrink. Setting labelAutoFit: false should work fine in your scenario. Please take a look at this updated jsfiddle.

    __
    Priyanka M S
    Team CanvasJS

    #21791

    Perfect, that did it! I knew it had to be something simple. I just didn’t have the time to really dig into it more. Thank you!

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

You must be logged in to reply to this topic.