ZingChart Events

The ZingChart library raises several events that can be captured. The event model is quite granular handling node level events (node_click, node_mouseover, node_mouseout) to chart wide events like interacting with the legend, hiding and showing plots, zooming, and dozens more.

There are three methods that can be used to configure chart event listeners.

Method 1: Universal Event Handling

This method will listen for the specified event across all charts in a page. To execute different functions across each chart, set up a switch that uses the chart’s returned id as the expression for the switch:


zingchart.load = function(p) {
  switch(p.id) {
    case 'chartId1':
      // Do something
      break;
    case 'chartId2':
      // Do something else
      break;
    case 'chartId3':
      // Reticulate splines
      break;
  }
}
                

Method 2: Bind Event After Render()

This method will bind an event to a specific chart after it has rendered.


zingchart.bind('chartId','load',function() {
  // Do something
});
                

Method 3: Bind Event During Render()

This method binds a list of events to an object at the time of the render.


zingchart.render({
  id: 'chartId',
  data: chartData,
  events: {
    load: function(p) {
      // do something
    }
  }
});
                

All Events