AnyStock Marker Series

• Overview
• AnyStock Marker Series Adjustment
  • Data
  • Switching series type
• Visualization
  • Coloring
  • Marker type
  • Hovered state

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

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

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

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

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

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

Hovered state

Use the dateTimeHighlighter() method to adjust crosshair.

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