The Range Area 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 an area.
Some data may look very nice and are easily understood in this form, in which an area spans a region from a minimum value to a maximum value.
Before you can add series to the chart you need to prepare Data Provider. You need two fields to create Range Area chart: High and Low. So the Data Provider should contain both fields.
Sample XML for Range Area Data Provider:
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.
XML syntax to declare series with Data Provider shown above:
01 |
<chart> |
02 |
<series_list> |
03 |
<series type="RangeArea" data_provider="dp1" color="#DC3912"> |
05 |
</series> |
06 |
</series_list> |
07 |
</chart> |
01 | { |
02 | seriesList: [ |
03 | { |
04 | type: "RangeArea", |
05 | dataProvider: "dp1", |
06 | color: "#DC3912", |
07 | name: "High/Low Temp. (C)" |
08 | } |
09 | ] |
10 | } |
Let's put this together and create the very basic Range Area sample:
To learn more about common series settings see Common Series Settings tutorial.
All visual and specific settings for Range Area series are set in <range_area_series> in <series> node.
You can change the upper and lower border of the area in <high> and <low> nodes and area fill in <fill> subnode of <range_area_series> node.
Sample XML with fill and line colors defined:
01 |
<series type="RangeArea" data_provider="dp1" color="#DC3912"> |
03 |
<range_area_series> |
05 |
<high> |
07 |
</high> |
08 |
<low> |
10 |
</low> |
11 |
</range_area_series> |
12 |
</series> |
01 | { |
02 | type: "RangeArea", |
03 | dataProvider: "dp1", |
04 | color: "#DC3912", |
05 | name: "High/Low Temp. (C)", |
06 | rangeAreaSeries: { |
07 | fill: { |
08 | color: "%Color", |
09 | opacity: 0.3 |
10 | }, |
11 | high: { |
12 | line: { |
13 | enabled: true, |
14 | color: "DarkColor(%Color)", |
15 | thickness: 2, |
16 | opacity: 1 |
17 | } |
18 | }, |
19 | low: { |
20 | line: { |
21 | enabled: true, |
22 | color: "DarkColor(%Color)", |
23 | thickness: 2, |
24 | opacity: 1 |
25 | } |
26 | } |
27 | } |
28 | } |
Live Sample below shows Range Area with configured visualization:
Two markers instead of one can be added to Range Area series: one for high value, another - for low. There are special <high> and <low> nodes for that.
Sample XML with marker settings:
01 | { |
02 | type: "RangeArea", |
03 | dataProvider: "dp1", |
04 | color: "#DC3912", |
05 | name: "Series", |
06 | rangeAreaSeries: { |
07 | high: { |
08 | marker: { |
09 | enabled: true, |
10 | size: 15, |
11 | type: "Star5", |
12 | states: { |
13 | normal: { |
14 | enabled: false |
15 | }, |
16 | hover: { |
17 | enabled: true, |
18 | fill: { |
19 | color: "Yellow", |
20 | opacity: 1 |
21 | }, |
22 | border: { |
23 | enabled: true, |
24 | thickness: 1, |
25 | color: "#333333", |
26 | opacity: 0.6 |
27 | } |
28 | } |
29 | } |
30 | } |
31 | }, |
32 | low: { |
33 | marker: { |
34 | enabled: true, |
35 | size: 13, |
36 | type: "Diamond", |
37 | states: { |
38 | normal: { |
39 | enabled: false |
40 | }, |
41 | hover: { |
42 | enabled: true, |
43 | fill: { |
44 | color: "Cyan", |
45 | opacity: 1 |
46 | }, |
47 | border: { |
48 | enabled: true, |
49 | thickness: 1, |
50 | color: "#333333", |
51 | opacity: 0.6 |
52 | } |
53 | } |
54 | } |
55 | } |
56 | } |
57 | } |
58 | } |
To learn more about marker settings see Series Common Settings article.
Live Sample:
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.
You can either use global tooltip settings or create personal tooltips for each series. See detailed description in Tooltips tutorial.
When you use Range Area 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:
01 |
<chart> |
02 |
<series_list> |
03 |
<series type="RangeArea" data_provider="dp1" compare_field_type="Close"> |
05 |
</series> |
06 |
</series_list> |
07 |
</chart> |
01 | { |
02 | seriesList: [ |
03 | { |
04 | type: "RangeArea", |
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 Area and Spline series on one chart in Comparison mode with comparison field set to Comparison High:
There is a special section to set default values in AnyChart Stock component XML: <series_settings>, 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 bounds and fill in one chart for all series of RangeArea type just set:
01 |
<chart> |
03 |
<range_area_series> |
05 |
<high> |
07 |
</high> |
08 |
<low> |
10 |
</low> |
11 |
</range_area_series> |
12 |
</series_settings_defaults> |
13 |
</chart> |
01 | { |
02 | seriesSettingsDefaults: { |
03 | rangeAreaSeries: { |
04 | fill: { |
05 | color: "%Color", |
06 | opacity: 0.5 |
07 | }, |
08 | high: { |
09 | line: { |
10 | enabled: true, |
11 | color: "DarkColor(%Color)", |
12 | thickness: 2, |
13 | opacity: 0.8 |
14 | } |
15 | }, |
16 | low: { |
17 | line: { |
18 | enabled: true, |
19 | color: "DarkColor(%Color)", |
20 | thickness: 2, |
21 | opacity: 0.8 |
22 | } |
23 | } |
24 | } |
25 | } |
26 | } |
Live sample below has two series of Range Area type. All common settings defined in <range_area_series/> node :
