ChartArea

Draws a rectangle with background and/or border. The ChartArea ist similar to the PlotArea but contains also the backgrounds of all the axes active in the current chart.

Area attributes:

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

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:

 <chartArea>
   <color>$WHITE</color>
   <borderWidth>1</borderWidth>
   <borderStyle>bold</borderStyle>
   <borderColor>$BLACK</borderColor>
   <style>style_2</style>
 </chartArea>

All elements not affected by ChartAreaOption have been grayed out.