AnyChart Documentation
Still have questions?
Contact support

Event Markers Basics

Overview

Event Markers are very helpful elements of the chart, as they allow showing user explicitly an event that took place at a specific moment of time.

This article explains how to add event markers to a chart, how to create different markers groups, and how to configure the appearance.

Check out Event Marker Tooltips and Event Marers Events to learn more.

Quick Start

This is a basic sample that shows how to add single marker group to a chart:

Playground

Data

The only required field in an event marker is date, all other fields can be choosen by you. By default the description field is shown in built-in tooltip and format field is used as the source of the symbol.

Event markers can be loaded into the chart or plot from a array of JSON objects of the following format:

[
  {
    "format": "J",
    "data": [
      {
        "date": "2016-01-15",
        "description": "Event Description",
        "customField": "some data"
      },
      {
        "date": "2016-01-21",
        "description": "Event Description",
        "customField": "some data"
      }
   },
  {
    "format": "G",
    "data": [
      {
        "date": "2016-01-15",
        "description": "Event Description"
      },
      {
        "date": "2016-01-21",
        "description": "Event Description"
      }
   }
]   

Playground

Or you can pass array to the group() method and create groups like this:

Groups

You can create as many event marker groups as you need and use the same or different symbols:

var eventMarkers = plot.eventMarkers();
eventMarkers.group(0, [{date: '2006-10-12', description: 'Event A'}]);
eventMarkers.group(1, [{date: '2006-10-12', description: 'Event B1'}, {date: '2006-12-06', description: 'Event B2'}]).format("B");

Playground

Appearance

Configuring appearance is as easy as with any other element of AnyChart. Choose a shape, color and configure a connector of event markers like this:

var eventMarkers = plot.eventMarkers();

// set event markers type
eventMarkers.type('pin');

// set hovered fill
eventMarkers.hovered().fill('#ff6e40');

Playground

Position

Event markers can be placed on the X axis, or be bound to any series on the plot. When bound to a series - you can define which value is used in case of multi-value series (e.g. OHLC). When there is only one series on the plot and position is set to 'series' - chart will determine this automatically.

// get eventMarkers
var eventMarkers = plot.eventMarkers();

// set event markers position settings
eventMarkers.position('series');
eventMarkers.fieldName('high');
eventMarkers.seriesId('someSeries');

Playground