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