AnyStock Marker Series

Overview

With Marker series every point on the plot is presented with a symbol. Find more about Marker series in the Marker Chart tutorial.

AnyStock Marker 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([
	['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);
series.name("USA");

Playground

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

// set the data
table = anychart.data.table('x');
table.addData([
	{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);
series.name("USA");

Playground

Simple multi-series chart:

// set the data
table = anychart.data.table();
table.addData([
	['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);
series_usa.name("USA");

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

Playground

Multiple series on different plots:

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

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

Playground

See Plot article to learn more about plots.

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

Use fill() and stroke() to change fill and stroke.

Use the hatchFill() method to change hatch fill settings.

// coloring
series_usa.fill("#CC9933");
series_usa.stroke("#FFCC33");

// hatch fill
series_uk.hatchFill("confetti");
series_uk.fill("#fff");
series_uk.stroke("#000");

Playground

Marker type

Us the type() method to change series marker type.

To change the marker size use the size() method.

// type and size
series_uk.type("square");
series_uk.size(7);

Playground

Hovered state

Use the dateTimeHighlighter() method to adjust crosshair.

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

Playground

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