Range Column/Bar chart


Overview

The Range Column/Bar charts displays a range of data by plotting two Y values per data point. Each Y value used is drawn as the upper, and lower bounds of a column/bar.


Sometimes range charts are referred as "floating" column/bar charts. Some data may look very nice and are easily understood in this form, in which the column floats in the chart, spanning a region from a minimum value to a maximum value.


Also you can create Waterfall charts, which are a special type of Floating Column Charts. A typical waterfall chart shows how an initial value is increased and decreased by a series of intermediate values, leading to a final value.

Chart

As range bar charts have to define lower and upper bound of bars - you have to specify these two values using "low" and "high" parameters.


Also "RangeBar" series type should be specified.

    chart.rangeBar([
        { high: 0.6, low: 6.3},
        { high: 0.7, low: 6.1},
        { high: 1.9, low: 8.5},
    ]);

Temperature Range Chart Sample

This sample shows how range bars can be used to chart temperature averages, the data is taken from UK weather stations 1971-2000 averages statistics:

JsFiddle Playground

Waterfall Chart Sample

In the sample below we formatted start and end values, here we will colorize chart as we need. Here it is - waterfall chart is displayed.

JsFiddle Playground

Configuration

All range charts are configured and tuned almost the same way as usual Bar or Column charts, with the only difference: as we have to Y values (start and end point) - we have two tooltips, two labels and two markers.

So, to configure them we defines chart as chart.rangeBar node and style>. barseries> contain point> and nodes that hold tooltip, label and marker settings for start and end points.

For example we want to change markers to "Star" for all range bar series on the chart, for both start and end point:

XML Syntax XML Code Plain code 01 barseries> 02 03

<marker_settings enabled="True"> 
04
  <marker type="Star5" size="20" /> 
05
</marker_settings> 
06 07 08
<marker_settings enabled="True"> 
09
  <marker type="Star5" size="20" /> 
10
</marker_settings> 
11
12 barseries> Here is the result of application of these settings to the waterfall chart sample data:

Live Sample: Sample Range chart - Waterfall chart with markers

to top

Some range bar settings can be moved to a style definition, and this style can be applied to the certain point - not a series.

Style named "Balance" definition may look like that:

XML Syntax XML Code Plain code 01 barstyle name="Starring"> 02 03 04 barstyle> To apply this style to the certain point we specify its name in it:

XML Syntax XML Code Plain code 01 And again, here is a sample resulting chart:

Live Sample: Sample Range chart - Waterfall chart with style –>

You are looking at an outdated 7.3.0 version of this document. Switch to the 8.0.1 version to see the up to date information.