You must be logged in to post your query.
Home › Forums › Chart Support › Chart shrinks inward when scrolling through data and new axis label appears
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
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
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.
I have expanded the label size in this JSFiddle to make the issue more visible. https://jsfiddle.net/87jf5m2c/4/
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.
labelAutoFit: false
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!
You must be logged in to reply to this topic. Login/Register