Events

User interactions

Adding a handler

To attach an event handler for various user interactions - click, hover, etc. - an an element, we use its event dispatcher, accessible via events property.

The most common method for the event dispatcher is on():

columnSeries.columns.template.events.on("click", function(ev) {
  console.log("Clicked on a column", ev.target);
});
columnSeries.columns.template.events.on("click", function(ev) {
  console.log("Clicked on a column", ev.target);
});

Or, if we want the event to execute only once, we can use once() instead:

columnSeries.columns.template.events.once("click", function(ev) {
  console.log("Clicked on a column", ev.target);
});
columnSeries.columns.template.events.once("click", function(ev) {
  console.log("Clicked on a column", ev.target);
});

Removing a handler

To remove a handler, we use off() method.

Please note that we need to pass in a reference to the function to off(), so the anonymous function approach above won't work.

fuunction handleColumnClick(ev) {
  console.log("Clicked on a column", ev.target);
}

// Add handler
columnSeries.columns.template.events.on("click", handleColumnClick);

// Remove handler
columnSeries.columns.template.events.off("click", handleColumnClick);
fuunction handleColumnClick(ev) {
  console.log("Clicked on a column", ev.target);
}

// Add handler
columnSeries.columns.template.events.on("click", handleColumnClick);

// Remove handler
columnSeries.columns.template.events.off("click", handleColumnClick);

Disabling or enabling events

To temporarily disable event handlers of certain type, without removing them permanently, use disableType():

columnSeries.columns.template.events.disableType("click");
columnSeries.columns.template.events.disableType("click");

To enable event type back, use enableType():

columnSeries.columns.template.events.enableType("click");
columnSeries.columns.template.events.enableType("click");

To temporarily disable all event handlers, use disable(). To enable all them back on - enable().

MORE INFO Please refer to the SpriteEventDispatcher for a complete list of available methods.

Behavioral events

Some elements might have events that signal some change on it without user's intervention.

For example, a Scrollbar might invoke a rangechanged event when its selection range changes, whether by dragging its grips or programatically.

For a complete list of element's events, see "Events" section in its class reference. Here's a link to Scrollbar events as an example.

Settings value change

Elements settings is a set of key-value pairs that can be set via set() property. Most of the configuration in amCharts 5 happens via settings. Read more about it here.

We can add a handler whenever a value for a particular setting changes using element's on() method:

series.on("visible", function(visible, target) {
  if (visible) {
    console.log("Series shown", target)
  }
  else {
    console.log("Series hidden", target)
  }
});
series.on("visible", function(visible, target) {
  if (visible) {
    console.log("Series shown", target)
  }
  else {
    console.log("Series hidden", target)
  }
});

Similarly, for catching value change of a private setting, we can use the onPrivate() method:

xAxis.onPrivate("selectionMin", function(value, target) {
  var start = new Date(value);
  console.log("Start date changed:", start);
});

xAxis.onPrivate("selectionMax", function(value, target) {
  var end = new Date(value);
  console.log("End date changed:", end);
});
xAxis.onPrivate("selectionMin", function(value, target) {
  var start = new Date(value);
  console.log("Start date changed:", start);
});

xAxis.onPrivate("selectionMax", function(value, target) {
  var end = new Date(value);
  console.log("End date changed:", end);
});

Related tutorials