Background

Draws a rectangle with background and/or border.

Area attributes:

  • x
    • Sets X-position on canvas.
    • 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
  • y
    • Sets Y-position on canvas.
    • 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
  • height
    • Height of the background
    • 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 the chart
  • width
    • Width of the background
    • 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 the chart
  • style
    • How the background area is filled.
    • Available styles: plain | transparent | style1 | style2 | style3 | style4 | style5 | style6 | style7 | style8
    • default: plain
  • glossyEffect
    • Draws a glossy effect at the top of the background area
    • Available styles: glossyEffect1 | glossyEffect2
    • default: glossyEffect1
  • color
    • Color of the background area / base color of the gradient with which the 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
  • surroundingWebsiteColor
    • Background color of the web page for the chart. Is used to fit seamlessly into your site.
    • 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
    • Outer padding to the top edge of the canvas
    • 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
    • Outer padding to the right edge of the canvas
    • 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
    • Outer padding to the bottom edge of the canvas
    • 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
    • Outer padding to the 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.)
    • default: 0
  • padding
    • Generic outer padding for all edges of the canvas. 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
  • innerPaddingTop
    • Padding between the top border defined in this element and the content of the chart.
    • 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: 18
  • innerPaddingRight
    • Padding between the right border defined in this element and the content of the chart.
    • 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: 18
  • innerPaddingBottom
    • Padding between the bottom border defined in this element and the content of the chart.
    • 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: 18
  • innerPaddingLeft
    • Padding between the left border defined in this element and the content of the chart.
    • 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: 18
  • innerPadding
    • Generic padding between the borders defined in this element and the content of the chart. Is overwritten by specific “innerPaddingX”-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: 18

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
  • shadowColor
    • Color of shadow
    • 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
  • shadowSize
    • Size in pixels: how far shadow overlaps background
    • 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
  • 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;

Image attributes

  • imageUrl
    • Address of the image file. Has to be defined if you use the image tag.
    • default: none
  • paddingTop
    • Padding between the image and the top 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.)
    • default: 0
  • paddingLeft
    • Padding between the image and the 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.)
    • default: 0
  • position
    • When you set “position:auto” the linked image is centered within the designated area.
    • Accepted values: auto
  • x
    • Sets the X-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: $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

Example:

   <background>
   <innerPadding>25</innerPadding>
   <innerPaddingTop>35</innerPaddingTop>
   <color>$LIGHTSKYBLUE</color>
   <borderRoundness>10</borderRoundness>
   <borderWidth>10</borderWidth>
   <borderStyle>embossed</borderStyle>
   <surroundingWebsiteColor>$WHITE</surroundingWebsiteColor>
   <borderColor>$BLACK</borderColor>
   <shadowSize>5</shadowSize>
   <shadowColor>$BLACK</shadowColor>
   <style>style_2</style>
</background>

All elements not affected by BackgroundOption have been grayed out.