Bar Chart

The bar chart plots a set of values as bars for each series in the given dataset.

Dataset Guidelines

This chart expects its data as a categorical dataset.

Required Properties

The only property a bar chart requires is the appropriate chart-type.


The example below contains the full set of additional supported properties with comments on its purpose and valid values.  It is recommended that new users start with this example as a starting place for building your first flash chart.


The following chart definition will produce the chart in the example below.


  <!-- Define the chart type -->

  <!-- Specify the title of the chart -->
  <title>Chart Title</title>

  <!-- General Chart Attributes -->
  <orientation>vertical</orientation>  <!-- valid values: vertical, horizontal -->
  <is-stacked>false</is-stacked>  <!-- set to true for a stacked bar -->
  <is-glass>false</is-glass>  <!-- set to true to apply the 'glass' style to bars -->
  <is-sketch>false</is-sketch>  <!-- set to true to apply the 'sketch' style to bars -->
    <!-- additional properties specific to sketch charts -->
    <fun-factor>10</fun-factor>  <!-- defines the messiness of bars, 0-2 tame, 3-6 pretty fun, 7+ lots of fun -->
    <outline-color-palette>  <!-- defines the colors to use for outlines of bars -->

  <!-- General Chart Formatting Properties -->
  <chart-background type="color">#FFFFFF</chart-background>
  <plot-background type="color">#FFFFFF</plot-background>
  <alpha>.70</alpha>  <!-- sets the transparency level of bars -->

  <!-- Define what to display in hover tips -->
  <!-- <tooltip> -->
    <!-- #top# -->
    <!-- #bottom# -->
    <!-- #val# -->
    <!-- #x_label# -->
    <!-- #key# -->
  <!-- </tooltip> -->

  <!--  X-Axis properties (domain)-->
  <domain-title>Domain Title</domain-title>
  <domain-color>#000000</domain-color>  <!-- color of x-axis -->
  <domain-grid-color>#FFFFFF</domain-grid-color>  <!-- color of vertical grid lines -->
  <domain-stroke>1</domain-stroke>  <!-- thickness of the x-axis -->

  <!--  Y-Axis properties (range) -->
  <range-title>Range Title</range-title>
  <range-minimum></range-minimum>  <!-- defines minimum starting point for y-axis -->
  <range-maximum></range-maximum>  <!-- defines maximum ending point for y-axis -->
  <range-color>#000000</range-color>  <!-- color of y-axis -->
  <range-grid-color>#EAEAEA</range-grid-color>  <!-- color of horizontal grid lines -->
  <range-stroke>1</range-stroke>  <!-- thickness of y-axis -->
  <range-steps>6</range-steps>  <!-- specify number of ticks, defaults to auto-calculated number -->

  <!-- Specify the color palette for the chart -->


Example with Orientation set to 'horizontal':

Example with is-glass set to 'true':

Example with is-3D set to 'true':

Example with is-sketch set to 'true' (fun factor = 10):