Page Comparison

{scrollbar}

h2. Area Chart

{anchor:areachart}
The area chart plots a set of values on a line per series, and fills the background of the plot area with the series color for each series in the given dataset.

h3. Dataset Guidelines

This chart expects its data as a [categorical dataset|The Categorical Dataset].

h3. Required Properties

The only property an area chart requires is the appropriate chart-type.
{code:XML}
<chart-type>AreaChart</chart-type>
{code}
The example below contains the full set of additional supported properties with comments on its purpose and valid values.&nbsp; It is recommended that new users start with this example as a starting place for building your first flash chart.

h3. Example

The following chart definition will produce the chart you see below:
{code:XML}
<chart>
  <!-- Define the chart type -->
  <chart-type>AreaChart</chart-type>

  <!-- Specify the title of the chart -->
  <title>Chart Title</title>
  <title-font>
    <font-family>Arial</font-family>
    <size>18</size>
    <is-bold>true</is-bold>
  </title-font>

  <!--  Area Chart properties -->
  <line-width>2.0</line-width>
  <dot-style>hollow</dot-style> <!-- values: dot, normal, hollow -->
  <dot-width>5</dot-width>
  <alpha>.95</alpha>

  <!-- General Chart Propeties -->
  <chart-background type="color">#FFFFFF</chart-background>
  <plot-background type="color">#FFFFFF</plot-background>

  <!--  X-Axis properties (domain) -->
  <domain-title>Domain Title</domain-title>
  <domain-title-font>
    <font-family>Arial</font-family>
    <size>14</size>
    <is-bold>true</is-bold>
  </domain-title-font>
  <domain-color>#000000</domain-color>  <!-- color of x-axis -->
  <domain-grid-color>#CCCCCC</domain-grid-color>  <!-- color of vertical grid lines -->
  <domain-stroke>1</domain-stroke>  !-- thickness of x-axis -->

  <!--  Y-Axis properties (range) -->
  <range-title>Range Title</range-title>
  <range-title-font>
    <font-family>Arial</font-family>
    <size>14</size>
    <is-bold>true</is-bold>
  </range-title-font>
  <range-minimum></range-minimum>  <!-- defines minimum starting point for y-axis range -->
  <range-maximum></range-maximum>  <!-- defines maximum ending point for y-axis range -->
  <range-color>#000000</range-color>  <!-- color of y-axis -->
  <range-grid-color>#CCCCCC</range-grid-color>  <!-- color of horizontal grid lines -->
  <range-stroke>1</range-stroke>  <!-- thickness of y-axis -->
  <range-steps>8</range-steps>  <!-- specify number of ticks, defaults to auto-calculated number -->

  <!-- Specify the color palette for the chart -->
  <color-palette>
    <color>#DB0000</color>
    <color>#B09A6B</color>
    <color>#2C00A8</color>
    <color>#C52F0D</color>
    <color>#123D82</color>
    <color>#4A0866</color>
    <color>#445500</color>
    <color>#FFAA00</color>
    <color>#1E8AD3</color>
    <color>#AA6611</color>
    <color>#772200</color>
    <color>#0f3765</color>
    <color>#B09A6B</color>
  </color-palette>

</chart>
{code}
!flash_area.jpg!