JavaScript Multi Chart Canvas

Example of a freeform canvas where you can have any number of charts with free control over draw order and positioning.

LightningChart JS supports displaying virtually any number of charts on a single page. You can also freely position, size and overlay them with full control over draw order between charts and other HTML content.

In this example, 20 charts are placed all over the place with 1 HTML canvas element mixed in as an extra complication.
The page can be extended with a scroll bar, and any chart can be dragged around by holding down the mouse and moving. Dragging any panel will bring it to the top of draw order.

Meanwhile, all charts are receiving real-time streaming data and continue to operate normally in terms of panning, zooming and cursor interactions.

Compared to other web browsers, this example performs extremely poorly on Mozilla Firefox due to relatively bad implementation of CanvasRenderingContext2D.drawImage when source is another canvas element.