Pre loader

Javascript Interactive Waterfall Spectrogram Chart

JavaScript Chart - Examples

SciChart.js ships with over 80 JavaScript Chart demos which you can browse, view the source code and see related documentation. Build incredible complex dashboards with SciChart.js, our High Performance JavaScript Chart Library.

Getting Started

In this demo we showcase the flexibility of SciChart.js to create interactive dynamic charts which respond to mouse-over hover and click events.

In the top chart: we’ve visualized 50 waveforms showing frequency spectra over time. To achieve the 3D effect we’re using a 2D chart but offsetting axis position in X & Y.

As you hover or click the top chart, the bottom-left chart updates. This is achieved using our SeriesSelectionModifier which adds selection / hover callbacks out of the box.

Lastly, we’ve added a custom annotation using SVG that you can drag. Dragging the position of this annotation updates the chart in the bottom left, which shows a cross-section of the spectra.

Using this demo you can appreciate the flexibility of SciChart and how you can add rich interactions to your scientific, engineering or business applications.

InteractiveWaterfallChart/index.tsx
View source code
Back to JavaScript Chart Examples

JavaScript Chart Examples

2D Charts

Chart Legends

3D Charts
Featured Apps
What's New