Bar Series

Overview

A bar chart, also known as a column chart, is a chart with rectangular bars of lengths usually proportional to the magnitudes or frequencies of what they represent.

to top

Adding Bar Series

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

Data Provider

Sample XML for Stick 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

Bar 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="Bar" color="#253992" data_provider="dpS1">
04       <name><![CDATA[MSFT]]></name>
05     </series>
06   </series_list>
07 </chart>
01{
02  seriesList: [
03    {
04      type: "Bar",
05      color: "#253992",
06      dataProvider: "dpS1",
07      name: "MSFT"
08    }
09  ]
10}

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

Live Sample:  Bar Series

to top

Configuring Visualization

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

The border of bars is configured using <border> subnode of <bar_series>: <border thickness="3"/>.

The color and opacity of bars is configured in <fill> subnode of <bar_series> node: <fill color="%Color" opacity="1"/>

Sample XML with width and and different visualization:

XML/JSON Syntax
Plain code
01 <series type="Bar" color="DarkRed" data_provider="dpS1">
02   <bar_series width="1">
03     <fill color="%Color" opacity="0.9" />
04     <border color="Gold" opacity="0.1" />
05   </bar_series>
06   <name><![CDATA[MSFT]]></name>
07 </series>
01{
02  type: "Bar",
03  color: "DarkRed",
04  dataProvider: "dpS1",
05  barSeries: {
06    width: 1,
07    fill: {
08      color: "%Color",
09      opacity: 0.9
10    },
11    border: {
12      color: "Gold",
13      opacity: 0.1
14    }
15  },
16  name: "MSFT"
17}

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

Live Sample:  Bar 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

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 Bar type just set:

XML/JSON Syntax
Plain code
01 <chart>
02   <series_settings_defaults>
03     <bar_series width="1">
04       <border color="#494949" opacity="0.8" />
05       <fill color="%Color" opacity="0.7" />
06       <marker size="6">
07         <border thickness="2" color="DarkColor(%Color)" />
08       </marker>
09     </bar_series>
10   </series_settings_defaults>
11 </chart>
01{
02  seriesSettingsDefaults: {
03    barSeries: {
04      width: 1,
05      border: {
06        color: "#494949",
07        opacity: 0.8
08      },
09      fill: {
10        color: "%Color",
11        opacity: 0.7
12      },
13      marker: {
14        size: 6,
15        border: {
16          thickness: 2,
17          color: "DarkColor(%Color)"
18        }
19      }
20    }
21  }
22}

Live sample below has three series of Bar type. All common settings defined in <bar_series/> node :

Live Sample:  Bar Series - Using Defaults Sections

to top