Events

Overview

This section explains how handling AnyChart Events helps to embed event markers into your application.

Events

Here is the full list of events that work with event markers:

ValueDescription
eventMarkersHoverEvent type for hover on markers
eventMarkersSelectEvent type for select on markers
eventMarkerClickEvent type for the marker click
eventMarkerDblClickEvent type for the marker double click
eventMarkerMouseDownEvent type for the marker mouse down
eventMarkerMouseMoveEvent type for the marker mouse move
eventMarkerMouseOutEvent type for the marker mouse over
eventMarkerMouseOverEvent type for the marker mouse over
eventMarkerMouseUpEvent type for the marker mouse up

The following sample shows how listening to these events can be used:

// show information when mouse is over a marker
chart.listen("eventMarkerMouseOver", function (e) {
    var symbol = e.eventMarker.symbol;
    var description = e.eventMarker.description;
    var date = e.eventMarker.date;
    document.getElementById("info").innerHTML =
      symbol + "@" + anychart.format.date(date)
  • ": " + description;}); // hide information when mouse leaves a marker chart.listen("eventMarkerMouseOut", function () { document.getElementById("info").innerHTML = ""; }); // open a url when a marker is clicked on chart.listen("eventMarkerClick", function (e) { var url = "https://www.google.ru/search?q=" + e.eventMarker.description; window.open(url, "_blank"); });

Playground

Interactive List

In this sample, events are used to create an interactive list showing additional information about event markers: Event Markers with Sidebar List.

HTML Tooltips

You can also use events to add custom HTML tooltips to your chart - see the Tooltips article.