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

Documentation

Plot Area JSON Syntax
Title JSON Syntax
Legend JSON Syntax 

Did this answer your question?