Pre loader

JavaScript Chart with Dynamic Layout

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

This showcase demonstrates the flexibility of the SciChart.js API to create dynamic layouts and to synchronize charts.

  • Click the button Single Chart then Chart Per Series.
  • The chart animates into a dashboard of 4×2 charts, then back into a single chart.
  • All the charts are synchronized meaning zooming one zooms all
  • Tooltips are also synchronized across charts

This uses the Subcharts API in SciChart.js which allows you to place charts in chart, and the ChartModifier API which allows you to create custom behaviours and tag them onto chart surfaces.

Happy customising!

DynamicLayout/index.tsx
View source code
DynamicLayout/GridLayoutModifier.ts
View source code
Back to JavaScript Chart Examples

JavaScript Chart Examples

2D Charts

Chart Legends

3D Charts
Featured Apps
What's New