Add Interactivity to Your JavaScript Charts

Interactivity Image ZingChart brings your charts to life! From interacting with data points, to zooming into a particular segment, the ZingChart library provides you with all the tools necessary to interact with your chart data.

Value Boxes, Tooltips and Crosshairs

Value Boxes: Know the exact value at a glance

Value Boxes are useful when the dataset is small, and the actual values are important to understand. When enabled, each node will have it's value placed on or around itself.

Tooltips: Reveal values without the clutter

When you have a slightly larger data set, and value boxes on each node would become too cluttered, tooltips allow you to see a node's value on demand.

Click to interact

Crosshairs: Enable more granularity

When even tooltips won't be granular enough, crosshairs give you an ease to inspect a spectrum of values.

Click to interact
book

Check out the Value Boxes turtorial in our docs to learn how to implement, format, and style value boxes in your charts.

Go to DocsDocs

Zooming and Scrolling

Zooming: See your data up close

When the dataset is so large that you need a magnifying glass to see a node's value, the ability to zoom into a point helps prevent squinting your eyes. Scroll bars can be added for additional functionality.

Click to interact

Preview: Overview your data while zoomed

The preview window helps keep track of where you are currently zoomed into. It also acts as a way to move the scroll position.

Click to interact

Multi-Axis: Zoom on multiple axes

Need to zoom on both the x and y axis? You can do that as well!

Click to interact
book

Read the Zoom, Scroll and Preview tutorial in our docs to learn how to use these three helpful chart features.

Go to DocsDocs

Legend interactions

Toggle: Easily change plot visiblity

Too many plots on the screen? You can use the legend to hide and show plots - you can even configure the action to rescale the chart when a plot is hidden!

Click to interact

Highlight: Overview your data while zoomed

While the legend's color corresponds the plot color, hovering over a legend item can be configured to highlight the plot.

Click to interact
book

Head over to the Legend tutorial in our docs to learn how to start adding interactive legends to your charts.

Go to DocsDocs