ContentArea

Draws a rectangle with background and/or border. The ContentArea ist similar to the ChartArea but also contains the background of the legend.

Area attributes:

  • style
    • How the ContentArea 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 ContentArea
    • Available styles: glossyEffect1 | glossyEffect2
    • default: glossyEffect1
  • color
    • Color of the ContentArea / base color of the gradient with which the ContentArea 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

  • Outer padding to 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
  • paddingRight
    • Outer padding to the 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.)
    • default: 0
  • paddingBottom
    • Outer padding to the 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.)
    • 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 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
  • 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
  • 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:

 <contentArea>
   <style>style1</style>
   <padding>0.04 * $chartShorterSide</padding>
   <paddingTop>0.045 * $chartShorterSide</paddingTop>
   <borderRoundness>5</borderRoundness>{{:contentarea.png|}}
 </contentArea>

All elements not affected by ChartAreaOption have been grayed out.