Still have questions?
Contact support

AnyStock Range Column Series


Range Column series is quite similar to Basic Column Chart. You can find all information about creating a standard column chart in the Range Column Chart article.

AnyStock Column Adjustment


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.

table =;
	['2010-01-01', 5.8, 7.9],
	['2010-02-01', 4.6, 6.1],
	['2010-03-01', 5.9, 8.1],
	['2010-04-01', 7.8, 10.7],
	['2010-05-01', 10.5, 13.7],
	['2010-06-01', 13.8, 17]

mapping = table.mapAs();
mapping.addField('low', 1);
mapping.addField('high', 2);

JsFiddle Playground

The next sample contains the same data arranged as array of objects.

table ='x');
	{x: '2010-01-01', low: 5.8,  high: 7.9},
	{x: '2010-02-01', low: 4.6,  high: 6.1},
	{x: '2010-03-01', low: 5.9,  high: 8.1},
	{x: '2010-04-01', low: 7.8,  high: 10.7},
	{x: '2010-05-01', low: 10.5, high: 13.7},
	{x: '2010-06-01', low: 13.8, high: 17}

mapping = table.mapAs({low: 'low', high: 'high'});

JsFiddle Playground

More about data settings in stocks can be found in the Stock Data tutorial. Now, let's look at some stock settings.

Multi series

Multiple series on different plots:

// set the series for London
var series_lon = chart.plot(0).rangeColumn(mapping_lon);"Water temperature in London in 2010-2012");

// set the series for Edinburgh
var series_edb = chart.plot(1).rangeColumn(mapping_edb);"Water temperature in Edinburgh in 2010-2012");

JsFiddle Playground

See the Chart Plots article to know how to manage the plots.

As stocks are intended to show large amounts of data, this data needs to be compressed at some point to be displayed correctly. All information about them can be found in the Data Grouping article.

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.



To change the fill and stroke use fill() and stroke(). Also it's possible to highlight a series not with a color but with a hatch fill using hatchFill() method.

// australia series coloring

// sydney series coloring

JsFiddle Playground

Hovered state

Use the dateTimeHighlighter() method to tune the crosshair.

// crosshair settings
chart.plot(0).dateTimeHighlighter("#663300", 1.5, "6 2", "round");
chart.plot(1).dateTimeHighlighter("#999", 1.5);

JsFiddle Playground