Still have questions?
Contact support
You are looking at an outdated 7.10.0 version of this document. Switch to the 7.12.0 version to see the up to date information.

AnyStock Step Area Series


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 Ares and Area Series in Basic Charts in the Area Charts tutorial.

There are some settings differently managed when we use Step Area in Stocks, so let's look at them in this article.

AnyStock Step Area Series Adjustment

The first difference between Basic Charts and Stocks comes when we start talking about the data.


When we set the data for the Step Area series in Stocks, we need to set it in table format, arranged as array of arrays or array of objects. Look through the next two samples: they both display the same data, but in the first one it is arranged as array of arrays.

// set the data
table =;
        ['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);

JsFiddle Playground

// set the data
table ="x");
        {'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'});

JsFiddle Playground

Note that there is no visible changes in the samples. So, you are free to arrange your data the most suitable way. You can read more about mananging Data in Stocks in the Stock Data tutorial.


A Stock Chart can be multi-serial. Though, it's necessary to take into account the range of different series' values. Look at the next sample.

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

JsFiddle Playground

There are two series in one chart, but the second series looks like a line. It becomes so because of different value ranges. While the first series' values are counted in million, the second series' values are counted in thousands. In this case these series need to be separated. If it's necessary to keep them in one chart, the best solution is to create the second plot for the second series.

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

JsFiddle Playground

The difference in the code is in a single parameter, means the plot ID, but the difference in the data visualization is spectacular. More about plots can be found in the Plots tutorial.

Switching series type

Our stocks has a method allowing to change the series type at once if the current series and the replacing one have the same or similar fields. Look up the Series Type and series types table to be sure it's possible to switch those series you need.

To switch the series use seriesType() method.


There are some visualization settings managing in Stocks differ from these settings managing in Basic Chart. Let's look at them.


Color scheme makes your chart unique and helps to distinguish the series. It's possible to change the fill color using the .fill() method and the stroke color using the .stroke() method.

Also, it's possible to set the hatch coloring in case of your Stock Charts being used by people with sight problems. Set the hatch type as a paramater of the .hatchFill() method.

// coloring
series_total.fill("#f00 0.6");

JsFiddle Playground

Hovered state

Points hovering in stocks differs from what it looks like in Basic Charts. In Stocks, when a point is hovered, there's a crosshair highlights it. You can adjust the crosshair (or highlighter) using the .dateTimeHighlighter() method. A highlighter (or a crosshair) is held by a plot, so it's possible to make all highlighters different of edit only one of them. Its parameters are color, thickness, dashPattern, lineJoin and lineCap, though it's not necessary to define them all.

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

JsFiddle Playground