Marker Chart

Overview

Marker chart (also known as a point chart) is identical to a line chart without the lines. A marker chart shows only endpoints of segments that make each line up.

This article explains how to create a basic Marker chart as well as configure settings that are specific to the type. See the table below to get a brief overview of the Marker chart's characteristics:

API
Classanychart.core.cartesian.series.Marker
DATA
Data Fieldsx, value
Multiple SeriesYES
OPTIONS
StackedN/A
VerticalVertical Marker
3DN/A
Error BarsMarker Chart with Error Bars
SUPPORTED CHART PLOTS
PolarPolar Marker
RadarRadar Marker
ScatterScatter Marker
StockStock Marker
RELATED TYPES
Bubble
Dot (Point) Maps
SEE ALSO
Chartopedia: Marker Chart
General Settings

Quick Start

To create a Marker chart, use the anychart.marker() chart constructor. If you pass the data to this chart constructor, it creates a Marker series. Note that this constructor creates a chart of a Scatter type. Find more about Scatter Charts in the Scatter Plot article article.

To create a Marker series explicitly, call the marker() method.

In the following sample, we DO NOT create a Scatter Marker Chart, we create a basic categorized Marker chart:

// create data
var data = [  
    ["2000", 1100],
    ["2001", 880],
    ["2002", 1100],
    ["2003", 1500],
    ["2004", 921],
    ["2005", 1000],
    ["2006", 1400]
];
  
// create a chart
chart = anychart.cartesian();

// create a marker series and set the data
chart.marker(data);
  
// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();

Playground

General Settings

In AnyChart there are many settings that are configured in the same way for all chart types, including the Marker chart (for example, legend and interactivity settings).

Read the overview of general settings: General Settings.

Special Settings

Size

The size of markers can be configured in three states: normal, hover, and selected. Use the normal(), hovered(), and selected() methods and combine them with size():

// set the size of markers
series.normal().size(10);
series.hovered().size(15);
series.selected().size(15);  

Playground

Type

The type (shape) of markers can be configured in three states: normal, hover, and selected. Use the normal(), hovered(), and selected() methods and combine them with type():

Here is the list of available marker types: Marker Types.

This sample shows how to set the type of markers:

// set the type of markers
series1.normal().type("star4");
series1.hovered().type("star5");
series1.selected().type("star6");
series2.normal().type("star4");
series2.hovered().type("star5");
series2.selected().type("star6");

Playground

Appearance

The appearance settings of a Marker chart can be configured in three states: normal, hover, and selected. Use the normal(), hovered(), and selected() methods.

Combine them with the following methods:

In the sample below, there are two Marker series with appearance settings configured:

// create the first series
series1 = chart.marker(data1);

// configure the visual settings of the first series
series1.normal().fill("#00cc99", 0.3);
series1.hovered().fill("#00cc99", 0.1);
series1.selected().fill("#00cc99", 0.5);
series1.normal().stroke("#00cc99", 1, "10 5", "round");
series1.hovered().stroke("#00cc99", 2, "10 5", "round");
series1.selected().stroke("#00cc99", 4, "10 5", "round");

// create the second series
series2 = chart.marker(data2);

// configure the visual settings of the second series
series2.normal().fill("#0066cc", 0.3);
series2.hovered().fill("#0066cc", 0.1);
series2.selected().fill("#0066cc", 0.5);
series2.normal().hatchFill("percent50", "#0066cc");
series2.hovered().hatchFill("percent50", "#0066cc");
series2.selected().hatchFill("percent50", "#0066cc");
series2.normal().stroke("#0066cc");
series2.hovered().stroke("#0066cc", 2);
series2.selected().stroke("#0066cc", 4);

Playground

Individual Points

If you use object notation to set the data, you can configure each marker individually – use extra data fields corresponding with the methods mentioned in the Size, Type, and Appearance sections of this article.

Also, you can use some other methods from anychart.core.StateSettings.

In the following sample, there is a Marker chart with one marker customized:

// create data
var data = [
  {x: "2000", value: 1100},
  {x: "2001", value: 880},
  {x: "2002", value: 1100},
  {x: "2003", value: 1500,
   normal:   {
               fill: "#b30059 0.3",
               stroke: "#b30059",
               markerSize: 15,
               type: "star4"
             },
   hovered:  {
               fill: "#b30059 0.1",
               stroke: "2 #b30059",
               markerSize: 20
             },
   selected: {
               fill: "#b30059 0.5",
               stroke: "4 #b30059",
               markerSize: 20
             }
  },
  {x: "2004", value: 921},
  {x: "2005", value: 1000},
  {x: "2006", value: 1400}
];

// create a chart
chart = anychart.cartesian();

// create a marker series and set the data
series = chart.marker(data);

Playground

Labels

Labels are text or image elements that can be placed anywhere on any chart (you can enable them on a whole series or in a single point). For text labels, font settings and text formatters are available.

Tooltips

A Tooltip is a text box displayed when a point on a chart is hovered. There is a number of visual and other settings available: for example, you can edit the text by using font settings and text formatters, change the style of background, adjust the position of a tooltip, and so on.