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.
*Note:* Unlike the ChartComponent (jFreeChart based), the Flash Area chart does not stack the area.


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!