Home › forums › Using CanvasJS › How to control padding of plotted data
Tagged: layout margin padding
This topic contains 2 replies, has 2 voices, and was last updated by ynotravid 9 months, 1 week ago.
Hi, how can I control how much space there is between the data and the edge of the plotting area?
I have looked through all the properties and methods but the closest I have found is the axis viewPortMinimum/Maximum. Which seems to be more oriented toward clipping data rather than what I’m looking for.
I have two charts above and below. On both charts I am plotting a day’s worth of data. I would like the data to line up between the top and bottom chart but for some reason the top chart has no padding on the plotted data but the bottom chart does.
Both charts are plotting data for the same time window but one chart has many more data points (15 minute sample vs 1 hour sample rate).
Thanks ahead of time!
You can use the property viewPortMinimum/ viewPortMaximum to control the space between the axis and the first dataPoint.
However, it would be easy for us to understand your requirement better with an example. Kindly create and share a jsfiddle representing the issue you are facing.
Priyanka M S
Hi Priyanka, sorry I misunderstood the description of these properties. Initially when I went to test these properties I had issue trying to use date for min and max. switching to timestamp resolves that issue.
In case someone comes accross this, here is a working fiddle
fiddle showing different margins for different data:
Issue resolved using viewPortMinimum / viewPortMaximum:
You must be logged in to reply to this topic.