Range Bar Series

Overview

The Range 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.

to top

Adding Series

Data-Provider

Before you can add series to the chart you need to prepare Data Provider. You need two fields to create Range Bar chart:high and low. So the Data Provider should contain both fields.

Sample XML for Range Bar Data Provider:

XML/JSON Syntax
Plain code
01 <data_provider data_set="dataSet1" id="dp1">
02   <fields>
03     <field type="High" column="2" approximation_type="High" />
04     <field type="Low" column="3" approximation_type="Low" />
05   </fields>
06 </data_provider>
01{
02  dataSet: "dataSet1",
03  id: "dp1",
04  fields: [
05    {
06      type: "High",
07      column: 2,
08      approximationType: "High"
09    },
10    {
11      type: "Low",
12      column: 3,
13      approximationType: "Low"
14    }
15  ]
16}

As you can see both fields are defined: high and low. Now you can declare series that will use this Data Provider.

to top

Series Declaration

XML syntax to declare series with Data Provider shown above:

XML/JSON Syntax
Plain code
01 <chart>
02   <series_list>
03     <series type="RangeBar" data_provider="dp1" color="#DC3912">
04       <name><![CDATA[High/Low Temp. (C)]]></name>
05       <range_bar_series width="0.5" />
06     </series>
07   </series_list>
08 </chart>
01{
02  seriesList: [
03    {
04      type: "RangeBar",
05      dataProvider: "dp1",
06      color: "#DC3912",
07      name: "High/Low Temp. (C)",
08      rangeBarSeries: {
09        width: 0.5
10      }
11    }
12  ]
13}

Let's put this together and create the very basic Range Bar sample:

Live Sample:  Range Bar Series

To learn more about common series settings see Common Series Settings tutorial.

to top

Configuring visualization

All visual and specific settings for Range Bar series are set in <range_bar_series> in <series> node.

The width of range bar is set using width attribute: <range_bar_series width="0.5">, which accepts values from 0 to 1.

Also, you can change the border of the bar and its fill.

Sample XML with bar width and colors defined:

XML/JSON Syntax
Plain code
01 <series type="RangeBar" data_provider="dp1" color="#DC3912">
02   <name><![CDATA[High/Low Temp. (C)]]></name>
03   <range_bar_series width="0.5">
04     <fill color="%Color" opacity="0.3" />
05     <border enabled="true" color="DarkColor(%Color)" thickness="2" opacity="1" />
06   </range_bar_series>
07 </series>
01{
02  type: "RangeBar",
03  dataProvider: "dp1",
04  color: "#DC3912",
05  name: "High/Low Temp. (C)",
06  rangeBarSeries: {
07    width: 0.5,
08    fill: {
09      color: "%Color",
10      opacity: 0.3
11    },
12    border: {
13      enabled: true,
14      color: "DarkColor(%Color)",
15      thickness: 2,
16      opacity: 1
17    }
18  }
19}

Live Sample below shows Range Bar with configured visualization:

Live Sample:  Range Bar Series Visual Settings

to top

Markers

Two markers instead of one can be added to Range Bar series: one for high value, another - for low. There are special <high> and <low> nodes for that.

Sample XML with marker settings:

XML/JSON Syntax
Plain code
01 <series type="RangeBar" data_provider="dp1" color="#DC3912">
02   <name><![CDATA[Series]]></name>
03   <range_bar_series width="0.5">
04     <high>
05       <marker enabled="true" size="15" type="Star5">
06         <states>
07           <normal enabled="false" />
08           <hover enabled="true">
09             <fill color="Yellow" opacity="1" />
10             <border enabled="true" thickness="1" color="#333333" opacity="0.6" />
11           </hover>
12         </states>
13       </marker>
14     </high>
15     <low>
16       <marker enabled="true" size="13" type="Diamond">
17         <states>
18           <normal enabled="false" />
19           <hover enabled="true">
20             <fill color="Cyan" opacity="1" />
21             <border enabled="true" thickness="1" color="#333333" opacity="0.6" />
22           </hover>
23         </states>
24       </marker>
25     </low>
26   </range_bar_series>
27 </series>
01{
02  type: "RangeBar",
03  dataProvider: "dp1",
04  color: "#DC3912",
05  name: "Series",
06  rangeBarSeries: {
07    width: 0.5,
08    high: {
09      marker: {
10        enabled: true,
11        size: 15,
12        type: "Star5",
13        states: {
14          normal: {
15            enabled: false
16          },
17          hover: {
18            enabled: true,
19            fill: {
20              color: "Yellow",
21              opacity: 1
22            },
23            border: {
24              enabled: true,
25              thickness: 1,
26              color: "#333333",
27              opacity: 0.6
28            }
29          }
30        }
31      }
32    },
33    low: {
34      marker: {
35        enabled: true,
36        size: 13,
37        type: "Diamond",
38        states: {
39          normal: {
40            enabled: false
41          },
42          hover: {
43            enabled: true,
44            fill: {
45              color: "Cyan",
46              opacity: 1
47            },
48            border: {
49              enabled: true,
50              thickness: 1,
51              color: "#333333",
52              opacity: 0.6
53            }
54          }
55        }
56      }
57    }
58  }
59}

To learn more about marker settings see Series Common Settings article.

Live Sample:

Live Sample:  Range Bar Series Marker Settings

to top

Legend Element

For each series you can define its element in legend. This element contains the settings for the formatting string of the text in legend that represents the series. Configuration of such elements is described in Legend: Series Labels article.

to top

Tooltips

You can either use global tooltip settings or create personal tooltips for each series. See detailed description in Tooltips tutorial.

to top

Choosing Field for Comparison Mode

When you use Range Bar series in comparison mode (when Value axis is set to "Changes" or "PercentChanges") - you need to define comparison field.

XML for comparison mode field selection:

XML/JSON Syntax
Plain code
01 <chart>
02   <series_list>
03     <series type="RangeBar" data_provider="dp1" compare_field_type="Close">
04       <name><![CDATA[MSFT]]></name>
05     </series>
06   </series_list>
07 </chart>
01{
02  seriesList: [
03    {
04      type: "RangeBar",
05      dataProvider: "dp1",
06      compareFieldType: "Close",
07      name: "MSFT"
08    }
09  ]
10}

As you can see comparison field is set in compare_field_type attribute, which can: High or Low. By default it is Low.

Live sample below shows Range Bar and Line series on one chart in Comparison mode with comparison field set to Comparison High:

Live Sample:  Range Bar Series - Comparison Field Settings

to top

Defaults Section

There is a special section to set default values in AnyChart Stock component XML: <series_settings_defaults>, where you can define marker and value highlighter settings for all series of the given type in one place, instead of setting them for each series individually.

For example, to configure bar border in one chart for all series of RangeBar type just set:

XML/JSON Syntax
Plain code
01 <chart>
02   <series_settings_defaults>
03     <range_bar_series width="0.5">
04       <border enabled="true" color="DarkColor(%Color)" thickness="2" opacity="0.8" />
05     </range_bar_series>
06   </series_settings_defaults>
07 </chart>
01{
02  seriesSettingsDefaults: {
03    rangeBarSeries: {
04      width: 0.5,
05      border: {
06        enabled: true,
07        color: "DarkColor(%Color)",
08        thickness: 2,
09        opacity: 0.8
10      }
11    }
12  }
13}

Live sample below has two series of Range Bar type. All common settings defined in <range_bar_series/> node:

Live Sample:  Range Bar Series - Using Defaults Section

to top