AnyStock Range Step Area Series


Range Step Area Series is quite similar to Range Area series, both in visualization and purpose. It uses two values for a point, each point looks like a both-sided step, so the whole series form a polygon. Find more information about using Range Areas of different types in Basic Charts in the Range Step Area Charts tutorial.

There are some settings differently managed when we use Range 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 Range 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-07-01', 23.65, 23.68],
        ['2004-07-02', 23.14, 23.21],
        ['2004-07-06', 22.68, 22.71],
        ['2004-07-07', 22.41, 22.74],
        ['2004-07-08', 22.29, 22.65],
        ['2004-07-09', 22.27, 22.58]
	// map the data
	mapping = table.mapAs();
	mapping.addField('low', 1);
	mapping.addField('high', 2);


	// set the data
	table ="x");
        {'x': "2004-07-01", 'low': 23.65, 'high': 23.68},
        {'x': "2004-07-02", 'low': 23.14, 'high': 23.21},
        {'x': "2004-07-06", 'low': 22.68, 'high': 22.71},
        {'x': "2004-07-07", 'low': 22.41, 'high': 22.74},
        {'x': "2004-07-08", 'low': 22.29, 'high': 22.65},
        {'x': "2004-07-09", 'low': 22.27, 'high': 22.58}
	// map the data
	mapping = table.mapAs({'x': 'x', 'low': 'low', 'high': 'high'});


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_ex1 = chart.plot(0).rangeStepArea(mapping_ex1);"Experiment 1");
    var series_ex2 = chart.plot(0).rangeStepArea(mapping_ex2);"Experiment 2");


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_ex1 = chart.plot(0).rangeStepArea(mapping_ex1);"Experiment 1");
    var series_ex2 = chart.plot(1).rangeStepArea(mapping_ex2);"Experiment 2");


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.

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_ex1.fill("#f00 0.6");


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");


You are looking at an outdated 7.11.0 version of this document. Switch to the 8.4.0 version to see the up to date information.