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

Know the exact value at a glance with Value Boxes

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

0812345670255101520161912182113191117

Reveal values without the clutter with Tooltips

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

Click to interact
02424681014180162468101214

Enable more granularity with Crosshairs

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

Click to interact
0110102030405060708090012246810
book

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

Go to Docs Docs

Zooming and Scrolling

See your data up close with Zooming

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
099910030050070009246View All

Overview of your data while zoomed with Preview

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
0999100300500700092460100300500700View All

Zoom on multiple axes

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

Click to interact
147194157167177187010040147157167177187View All
book

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

Go to Docs Docs

Legend interactions

Easily change plot visibility with Toggle

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
026246810141822040102030DogsCats

Overview of your data while zoomed with Highlight

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

Click to interact
026246810141822040102030DogsCats
book

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

Go to Docs Docs

Don't see the feature you're looking for?

We can build it for you!
17
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
22
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
100
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
View All
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
900
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
187
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
35
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source