AnyStock Step Area Series

• Overview
• AnyStock Step Area Series Adjustment
  • Data
  • Multi series
  • Switching series type
• Visualization
  • Coloring
  • Hovered state

Overview

Step Area Series is quite similar to Area series, both in visualization and purpose. It uses one value for a point, but the points look like steps instead of vertexes of a polygon. Find more information about using Step Area in Basic Charts in the Step Area Chart tutorial.

AnyStock Step Area Series Adjustment

Data

The data in stocks should be formatted as a table, there are two ways of setting it: as an array of arrays or as an array of objects.

Here is how to set data as an array of arrays, array contains values and then you map the data set to tell the component which column contains values.

// set the data
table = anychart.data.table();
table.addData([
	['2004-01-02', 29955800],
	['2004-01-05', 38892100],
	['2004-01-06', 43684400],
	['2004-01-07', 48757500],
	['2004-01-08', 61683300],
	['2004-01-09', 68856400],
	['2004-01-12', 52871900],
	['2004-01-13', 56334200]
]);

// map the data
mapping = table.mapAs();
mapping.addField('value', 1);

// set the data
table = anychart.data.table('x');
table.addData([
	{'x':"2004-01-02", 'value': 29955800},
	{'x':"2004-01-05", 'value': 38892100},
	{'x':"2004-01-06", 'value': 43684400},
	{'x':"2004-01-07", 'value': 48757500},
	{'x':"2004-01-08", 'value': 61683300},
	{'x':"2004-01-09", 'value': 68856400},
	{'x':"2004-01-12", 'value': 52871900},
	{'x':"2004-01-13", 'value': 56334200}
]);

// map the data
mapping = table.mapAs({x: 'x', value: 'value'});

You can read more about mananging Data in Stocks in the Stock Data tutorial.

Multi series

Simple multi-series chart:

// set the series
var series_total = chart.plot(0).stepLine(mapping_total);
series_total.name("Total Request Number");
var series_region = chart.plot(0).stepLine(mapping_region);
series_region.name("Region Request Number");

Multiple series on different plots:

// set the series
var series_total = chart.plot(0).stepLine(mapping_total);
series_total.name("Total Request Number");
var series_region = chart.plot(1).stepLine(mapping_region);
series_region.name("Region Request Number");

More about plots can be found in the Plots tutorial.

Switching series type

You can change the type of the series to another compatible type. See the Series Type and series types table.

To switch the series use seriesType() method.

Visualization

Coloring

To change the fill color use the fill() method and to change the stroke color use the stroke() method.

To set the hatch type use the hatchFill() method.

// coloring
series_total.stroke("#ff0000");
series_total.fill("#f00 0.6");
series_region.stroke("#000");
series_region.fill("#fff");
series_region.hatchFill("diagonalCross");

Hovered state

In Stocks, when a point is hovered, there's a crosshair. You can adjust the crosshair (or highlighter) using the dateTimeHighlighter() method.

// crosshair settings
chart.plot(0).dateTimeHighlighter("green", 0.5, "10 4");