Legend Option

Draws the legend of the chart.

Attributes

  • image
    • Note: This has the same attributes as the image tag within the background, but is used to insert a second image into the legend e.g. a logo of your company next to the heading of the legend.
  • width
    • Width of the legend in pixels
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.)
    • default: 30% of chart width
  • height
    • Height of legend in pixels
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.)
    • default: height of child elements
  • padding
    • Generic inner padding to all sides. Is overwritten by specific “paddingX” options.
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.)
  • paddingTop
    • Inner padding to upper edge of the element
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.)
  • paddingRight
    • Inner padding to right edge of the element
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.)
  • paddingBottom
    • Inner padding to bottom edge of the element
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.)
  • paddingLeft
    • Inner padding to left edge of the element
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.)

Background styles for Legend Option

Draws a rectangle with background and/or border within the legend.

Area attributes:

  • style
    • How the background area is filled.
    • Accepted values: plain | transparent | style1 | style2 | style3 | style5 | style6 | style8
    • Note: style4 and style7 are not recommended for filling the legend area
    • default: plain
  • glossyEffect
    • Draws a glossy effect at the top of the legend
    • Accepted values: glossyEffect1 | glossyEffect2
    • default: glossyEffect1
  • color
    • Color of the legend background area / Base color of the gradient with which the legend background is filled.
    • Accepted values: color hex code (e.g. #87CEFA ), RGBA code (e.g rgba(135,205,250,1) ) or CSS color name (e.g. $LIGHTSKYBLUE )
    • default: $WHITE
  • paddingTop
    • Padding to the top edge of the legend element
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.
    • default: 0
  • paddingRight
    • Padding to the right edge of the legend element
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.
    • default: 0
  • paddingBottom
    • Padding to the bottom edge of the legend element
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.
    • default: 0
  • paddingLeft
    • Padding to the left edge of the legend element
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.
    • default: 0
  • padding
    • Generic padding to all edges of the legend element. Is overwritten by specific “paddingX” options.
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.
    • default: 0

Border Attributes:

  • borderRoundness
    • Radius of rounded corners (if > 0 )
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.
    • default: 0
  • borderWidth
    • Width of the border (does not apply to embossed style)
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.
    • default: 5
  • borderColor
    • Color of the border / base color of border gradient
    • Accepted values: color hex code (e.g. #87CEFA ), RGBA code (e.g rgba(135,205,250,1) ) or CSS color name (e.g. $LIGHTSKYBLUE )
    • default: $BLACK
  • borderStyle
    • Style of the border.
    • Available styles: embossed | bold | glossy | light3d | bright
    • default: embossed

Example

<legend>
   <width>0.25 * $chartWidth</width>
   <padding>0.025 * $chartWidth</padding> 
   <paddingTop>0.075 * $chartWidth</paddingTop>
   <background>
      <color>$LIGHTSKYBLUE</color>
      <style>style3</style>
      <glossyEffect>glossyEffect2</glossyEffect>
      <borderStyle>embossed</borderStyle>
      <borderRoundness>0.01666 * $chartWidth</borderRoundness>
   </background>
</legend>

All elements not affected by Legend Option have been grayed out.

Image attributes for legend image and legend background image

You can use two images within the legend, e.g. a logo of your company next to the legend heading and a different image within the legend background.

Example:

<legend>

 <image>
  <imageUrl>yourcompanylogoURL</imageUrl>
 </image>

 <background>
  <image>
   <imageUrl>yourlegendbackgroundURL</imageUrl>
  </image>
 </background>

</legend>

Image attributes

  • imageUrl
    • Address of the image file. Has to be defined if you use the image tag.
    • default: 0
  • paddingTop
    • Padding between the image and the top edge of the legend element.
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.
    • default: 0
  • paddingLeft
    • Padding between the image and the left edge of the legend element.
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.
    • default: 0
  • position
    • When you set “position:auto” the linked image is centered within the designated area.
    • Accepted values: auto
    • default: deactivated
  • x
    • Sets the X-position of the image.
    • Accepted values: Size as number in pixels, or proportion of chartsize (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.
    • default: $x
  • y
    • Sets the Y-position of the image.
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.
    • default: $y
  • height
    • Height of the area that will be filled with an image. Can be used to crop images.
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.
    • default: Height of parent element
  • width
    • Width of the area that will be filled with an image. Can be used to crop images.
    • Accepted values: Size as number in pixels, or proportion of chart size (e.g. 5 or 0.1*$chartWidth). (For a full list of available chart constants, see list of chart constants.
    • default: width of parent element