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

[ChristianRemwood]

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

• This topic was modified 6 years, 4 months ago by ChristianRemwood.

[Priyanka M S]

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

[ChristianRemwood]

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.

• This reply was modified 6 years, 4 months ago by ChristianRemwood.
• This reply was modified 6 years, 4 months ago by ChristianRemwood.

[ChristianRemwood]

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

[Priyanka M S]

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

[ChristianRemwood]

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!