User Interactions

JavaScript Chart Features

User Interactions

Back To Categories

JSCharting supports robust interactivity, enabling page level settings to communicate with and modify the chart in real-time. Advanced interactivity features include dynamic legend entries, selection, URL targeting, drill-down and zooming. JSCharting's advanced interactivity can be utilized directly by end users through direct chart interaction as well as by the developer programmatically with JavaScript or page level interactions.

Axis Interactive Markers

Adds and removes axis markers dynamically through an interactive UI.

Interactive KPI

KPI buttons select details chart data.

Deposit Calculator

Adjust pie shape elements using slider UI controls.

Restaurant Rating

Slider UI controls with a visualization using markers.

Master Detail Map

Multiple map point selection master detail chart.

Data Range Slider

Slider UI item with a scale microchart.

Interactive Data

Allows adding and removing data points interactively by clicking on the chart.

Master Detail Slider

Master detail charts controlled with a slider UI item.

Point Selection Limit

Limit point selection to a maximum of 2 points.

Select All Checkbox

Point selection with checkboxes and a custom select or clear all checkbox.

Interactive Axis Values

Displays the axis values based on click location within a chartArea.

Axis Interactive Extremes

Get and set the axis range dynamically through an interactive UI.

Interactive Master Detail Chart

Control a second detail chart by clicking on the master chart.

Zoom Selection

Use selecting events to draw a clipped overlay line series.

Bar Hover State

Column series type hover and select states.

Data Click Events

Set a default point click event handler.

Data Point Click

Set a point click event for the first data point.

Dynamic Data

Generates a chart based on data calculations from a different chart.

Export Branding

Adds a message to the chart seen only when it is exported.

Export Prog

Demonstrates how to export or print a chart programmatically.

Get Selected Data

Programmatically acquire multiple user selected data points.

Hover Side Info

Uses the chart to replace tokens in an HTML string template used to show details in a table when hovering a point.

Icon Chart Types

UI dropdown control with morphing SVG icons.

Legend Events

Demonstrates using series legend entry click events and how to suppress the default behavior.

Organizational Chart Designer

An interactive organizational chart designer with data download feature.

Legend Selection Highlighting

Uses select state to manually control series highlighting with legend entry clicks.

Series Selection Checkbox

Modify legend entry click to select series with checkboxes.

Series Selection Labels

Uses checkboxes on first points of series indicating series selection.

Show Hide Data

Demonstrates toggling series visibility using uiItem checkbox.

Token Queries

Queries the chart for info by passing a string with tokens to get relevant reports.

Zooming Time

Demonstrates zooming a time series.

Zooming X

Demonstrates zooming the x axis.

Zooming XY

Demonstrates zooming the x and y axes simultaneously.