Marker Chart

• Overview
• Modules
• Quick Start
• General Settings
• Special Settings
  • Size
  • Type
  • Appearance
  • Individual Points
  • Labels
  • Tooltips

Overview

Marker chart (otherwise 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:

Modules

The Marker chart requires adding the Core and Basic Cartesian modules:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-cartesian.min.js"></script>

Alternatively, you can use the Base module, which includes, among other things, the two modules mentioned above:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-base.min.js"></script>

Learn more: Modules.

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

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

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: anychart.enums.MarkerType.

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

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:

• fill() to set the fill
• hatchFill() to set the hatch fill
• stroke() to set the stroke

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

Individual Points

If you use object notation to set the data, you can configure each marker individually - use extra data fields corresponding to 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);

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 over. 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.