How do I prevent the legend and title from overlapping with the chart?

There are two ways to prevent overlap between the title, legend, and chart:

Without any kind of adjustment to the layout/margins, this is how a default chart with a title and legend appears. Notice how the legend overlaps the title and plot area. (To make the overlap more obvious, borders and backgrounds were added to the Title, Legend, and Plot Area objects.)

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
  },
  ...
}

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%"
  },
  ...
}

Refer to the JSON pages for the Plot Area, Title, and Legend for a full list of layout/margin, positioning, and sizing-related attributes.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.