Features

Describes chart interactivity features.

Introduction

The chart is equipped with interactive features that allow users to modify the data display in real-time by clicking the legend entry to hide/show series. When series.pointSelection is set to true, users can select one or more data points of that series. The chart can then return the info on the selected points programmatically.

Visual States

Interactive elements such as points, labels, buttons, and legend entries include state properties that control the visual appearance of those objects in certain states. For example when a mouse hovers a data point, its color may change.

Reference:
States Tutorial Visual states tutorial.

Events

Events provide a way to execute code when specific interactions occur with the chart, or during certain stages of the chart rendering process. The click event is used as an example below to demonstrate the API ease of use.

Intro with Click Event as example

JSCharting has some convenient API features built in to improve working with events. The traditional way to set up say a point click event looks like:

points: [
  {
    /*...*/
    events: {
      click: function(e) {
        // event code
        alert(this.name);
      }
    },
    states_hover: {
      cursor: "pointer"
    }
  },
  {
    /*...*/
  }
];

Event API

Please see the following event API references:

Reference:
chart.events JSON Configuration Chart related events
point.events JSON Configuration Data point related events
series.events JSON Configuration Data series related events

Get Selected Points

Reference:
Get Selected Data Sample Demonstrates how to use let users select points and gather this information programmatically.

Documentation