Spline Area Series

Overview

Data that is arranged in columns or rows on a worksheet can be plotted in an area chart. Spline Area charts emphasize the magnitude of change over time, and can be used to draw attention to the total value across a trend.

to top

Adding Spline Area Series

Before you can add Spline Area series to the chart you need to prepare Data Provider. You need one value to create Spline Area chart: value. So the Data Provider should contain this field.

Data Provider

Sample XML for Spline Area Data Provider:

XML/JSON Syntax
Plain code
01 <data_provider data_set="dataSet1" id="dpS1">
02   <fields>
03     <field type="Value" column="4" approximation_type="Close" />
04   </fields>
05 </data_provider>
01{
02  dataSet: "dataSet1",
03  id: "dpS1",
04  fields: [
05    {
06      type: "Value",
07      column: 4,
08      approximationType: "Close"
09    }
10  ]
11}

As you can see only one value field is defined. Now you can declare series that will use this Data Provider.

to top

Spline Area 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="SplineArea" color="DarkSeaGreen" data_provider="dpS1">
04       <name><![CDATA[MSFT]]></name>
05       <area_series>
06         <fill color="%Color" opacity="0.7" />
07         <line color="DarkColor(%Color)" thickness="2" opacity="1" />
08       </area_series>
09     </series>
10   </series_list>
11 </chart>
01{
02  seriesList: [
03    {
04      type: "SplineArea",
05      color: "DarkSeaGreen",
06      dataProvider: "dpS1",
07      name: "MSFT",
08      areaSeries: {
09        fill: {
10          color: "%Color",
11          opacity: 0.7
12        },
13        line: {
14          color: "DarkColor(%Color)",
15          thickness: 2,
16          opacity: 1
17        }
18      }
19    }
20  ]
21}

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

Live Sample:  Spline Area Series

to top

Configuring Visualization

All visual and specific settings for Spline Area series are set in <area_series> in <series> node.

The thickness of top area line is set using thickness attribute in <line> subnode of <area_series>: <line thickness="3"/>, which accepts values in pixels.

The color and opacity of area itself is set in <fill> subnode of <area_series> node: <fill color="%Color" opacity="1"/>

Sample XML with width and and different visualization:

XML/JSON Syntax
Plain code
01 <series type="SplineArea" color="DarkRed" data_provider="dpS1">
02   <area_series>
03     <line thickness="1" color="DarkColor(%Color)" opacity="1" />
04     <fill color="%Color" opacity="1" />
05   </area_series>
06   <name><![CDATA[MSFT]]></name>
07 </series>
01{
02  type: "SplineArea",
03  color: "DarkRed",
04  dataProvider: "dpS1",
05  areaSeries: {
06    line: {
07      thickness: 1,
08      color: "DarkColor(%Color)",
09      opacity: 1
10    },
11    fill: {
12      color: "%Color",
13      opacity: 1
14    }
15  },
16  name: "MSFT"
17}

Live Sample below shows to charts with different Spline Area series, each with own specific settings:

Live Sample:  Spline Area Series Visual 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

Joining Spline Area with Missing Points

XML/JSON Syntax
Plain code
01 <series type="SplineArea" data_provider="dp1" color="#005ECB">
02   <area_series connect_missing_points="true" />
03 </series>
01{
02  type: "SplineArea",
03  dataProvider: "dp1",
04  color: "#005ECB",
05  areaSeries: {
06    connectMissingPoints: true
07  }
08}

Live Sample shows two similar series: one with with connect_missing_points set to true and another - to false.

Live Sample:  Spline Area Series - Connect Missing Points 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 line in one chart for all series of Spline Area type just set:

XML/JSON Syntax
Plain code
01 <chart>
02   <series_settings_defaults>
03     <area_series>
04       <line enabled="true" color="DarkColor(%Color)" thickness="2" opacity="1" />
05       <fill enabled="true" color="%Color" opacity="0.3" />
06       <marker size="10" />
07     </area_series>
08   </series_settings_defaults>
09 </chart>
01{
02  seriesSettingsDefaults: {
03    areaSeries: {
04      line: {
05        enabled: true,
06        color: "DarkColor(%Color)",
07        thickness: 2,
08        opacity: 1
09      },
10      fill: {
11        enabled: true,
12        color: "%Color",
13        opacity: 0.3
14      },
15      marker: {
16        size: 10
17      }
18    }
19  }
20}

Live sample below has three series of Spline Area type. All common settings defined in <area_series/> node :

Live Sample:  Spline Area Series - Using Defaults Section

to top