Still have questions?
Contact support

AnyStock Marker Series


The most popular usage of basic Marker series is demonstrating the distribution of some events through the timeline. It's rather useful in statistics, ecomonics, sports, finances, etc. Marker Charts use only points to show the values. It can display a lot of series at once - this feature might be quite useful in some cases. Find more about Marker series in the Marker Chart tutorial.

In Stocks, Marker series are intended to show a big amount of data, so some their settings in stocks are special. We'll consider them in this article.

AnyStock Marker Series Adjustment


The first difference between Basic Charts and AnyStock is the data format. All data points in Stocks should be represented in table format. Let's create a sample to show how it looks like:

// set the data
table ="x");
{x:'1790-01-01', value:3929},
{x:'1795-01-01', value:4390},
{x:'1800-01-01', value:5236},
{x:'1805-01-01', value:5989},
{x:'1810-01-01', value:7239},
{x:'2005-01-01', value:299456},
{x:'2010-01-01', value:308745},
{x:'2015-01-01', value:318914}

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

// chart type
chart = anychart.stock();

// set the series
var series = chart.plot(0).marker(mapping);"USA");

In this sample, the data was arranged as array of objects. Now, let's look at the same sample with this data arranged as array of arrays.

// set the data
table =;
['1990-01-01', 248709],
['1995-01-01', 272119],
['2000-01-01', 281421],
['2005-01-01', 299456],
['2010-01-01', 308745],
['2015-01-01', 318914]

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

// chart type
chart = anychart.stock();

// set the series
var series = chart.plot(0).marker(mapping);"USA");

It seems quite clear that nothing has finally changed in the stock appearance. So, choose the data type you prefer to work with.

As lots of chart types supports being multiserial, as well as stocks do. There are two ways to create a multi-series stock: to create several series in one plot (find more about them in the Plot article) or create several plots and distribute all series among these plots. Let's look at the next couple of Marker Stocks.

// set the data
table =;
['1995-01-01', 272119, 49066],
['2000-01-01', 281421, 49138],
['2005-01-01', 299456, 51121],
['2010-01-01', 308745, 53012],
['2015-01-01', 318914, 54986]

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

// chart type
chart = anychart.stock();

// set the US series
var series_usa = chart.plot(0).marker(mapping_usa);"USA");

// set the UK series
var series_uk = chart.plot(0).marker(mapping_uk);"UK");

// set the US series
var series = chart.plot(0).marker(mapping_usa);"USA");

// set the UK series
var series = chart.plot(1).marker(mapping_uk);"UK");

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.


Some Stock Marker visualization settings are different from the similar ones in Basic Markers due to its specifics. Let's have a look at them.


Coloring is a very useful feature when it comes to emphasizing some values or series on a chart. In stocks, use fill() and stroke() to change the default colors.

AnyStocks have one more interesting feature. In case of having problems with eyesight, you might want to use hatch fillings, which monochrome palette allows to distinguish series without coloring them differently. Let's use our previous sample to show those features in action.

// coloring

// hatch fill

Note that despite being fill with hatch fills, the lower chart has not become easier to recognize the points. It seems necessary to make them bigger in size and possibly change the form. That's what the next paragrach about.

Marker type

Marker series have one more special feature: a marker type. It's possible to define special markers form for the whole series (which can be useful in multi-series stocks) or for some particular points in order to emphasize their importance (e.g. the highest and the lowest values). The type() method is responsible for that. Another useful setting is marker size. It's possible to make markers much bigger or smaller. In our case it's definiteley necessary to enlarge the markers. We will use size() method.

// type and size

Hovered state

In hovered state, points don't change their color or size, but there is a highlghter (crosshair) that helps to follow the points you hover. It helps especially when there are too many points with one value on X-axis, so a union tooltip shows up and demonstrated all those values. It's possible to adjust the crosshair default settings.

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