ZingChart: How do I prevent the legend and title from overlapping chart data?
The example below shows how a default chart with a title and legend appears and note the overlaps. We adjusted the colors and borders in a manner so it is clear.
Example: https://demos.zingchart.com/view/ZG2TUU48
The layout defaults address a compromise between space and common use, but they may not work for your design or chart data so you may desire to adjust the layout mechanism.
There are two ways to prevent overlap between the title, legend, and chart:
Automatic Adjustment
To automatically adjust the layout, add an "adjust-layout" attribute to each object ("title", "legend", "plotarea"), and set the value to true.
{
...
"title": {
"adjust-layout":true
},
"legend": {
"adjust-layout":true
},
"plotarea": {
"adjust-layout":true
},
...
}
Example: https://demos.zingchart.com/view/WEJLV9MN
Manual Adjustment
Alternatively, you can manually adjust the layout and margins, as well as set the positioning and sizing of the objects. Use a combination of the following attributes:
-
"margin-left","margin-right","margin-top", and"margin-bottom"to adjust the object's margins -
"x"and"y"to set the object's positioning (relative to the upper-left corner of the chart object) -
"height"and"width"to set the object's size
{
...
"title": {
"margin-left":"30%",
"margin-right":"5%",
"margin-top":"5%",
"margin-bottom":"90%"
},
"legend": {
"margin-left":"5%",
"margin-top":"20%",
"height":"20%",
"width":"15%"
},
"plotarea": {
"margin-left":"30%",
"margin-right":"5%",
"margin-top":"20%",
"margin-bottom":"10%"
},
...
}
Example: https://demos.zingchart.com/view/7Q5TH2DG