ZingChart: Margins and Padding - Main chart area
Configuring your chart margins and padding can be done in a variety of ways. The ZingChart library provides the ability to granular control to just about everything in your charts. Below are some key insights to help you get started with chart margins.
This article will start by discussing adjusting margins around the main chart area and compensating for surrounding elements.
plotarea:{} - Generally the area directly behind a chart's plotted data. The white section in the below charts.
Adjusting the padding and margins of your chart to make sure all of the scale labels, scale title, legend, title and preview window appear correctly always seem to come up. Below is a chart with the basic default chart features. Since there are not many elements on the chart everything fits pretty well out of the box.
You may notice there is a bit too much space along the top and bottom of the chart or a little too much space on the right since it has no text. This can be adjusted manually if you so choose.
While manual adjustments to the charts plotarea:{} margins can be helpful this does become a bit rigid when working with responsive charts, dynamic data and all of the other unknowns likely to effect your charts and app. If you were to add something as simple as scale titles you would need to adjust your margins.
ZingChart does offer a more flexible solution.
Dynamic Margins
When adding additional elements to your chart you can set dynamic margins within plotarea:{} allowing ZingChart to calculate and apply margins which help everything fit reasonably on the chart.
plotarea:{ margin: 'dynamic' }
In the above chart you can see the dynamic margins created good margins with a simple attribute and adjusted for the top edge of the chart (don't mind the title), the right side, the bottom including the label and the left including the label. Anything directly attached to the scales (ie scaleX or scaleY) is compensated for automatically. This means labels, larger values on scaleY, rotated labels on scaleX, etc.
What is not automatically compensated for is detached elements such as a title, legend or preview. ZingChart has a simple attribute which can be used to consider the detached elements as well.
To prevent detached elements such as title, legend and preview from overlapping the main chart area set the following attribute within the elements object:
adjustLayout: true
We do have an additional article on adjustLayout which may help with more information.
When configuring a chart with dynamic margins and having adjustLayout: true the chart will compensate for detached elements. You can move the elements into different positions using standard align and verticalAlign attributes and ZingChart will continue to adjust margins appropriately.
Lastly ZingChart does provide a bit of functionality to adjust the margin which is set by dynamic margins. These margin offsets will only effect sides of the chart which has a scale associated to it. The example below shows adding additional margin to the left and bottom of the plotarea:{}. The margin offset feature will not work on the top or right side of the chart since there are not scales associated to those sides.
marginBottomOffset: 10 // or '10px', '10%' marginLeftOffset: 10 // or '10px', '10%' marginRightOffset: 10 // or '10px', '10%' marginTopOffset: 10 // or '10px', '10%'
Documentation