Pre loader

Quadrant chart using Background Annotations

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 how to colour areas of the chart surface using background annotations. This allows you to create a four-quadrant chart like this one in JavaScript with SciChart.js.

Annotations may be placed below the gridlines on a chart surface, above but behind series, or above series. They may be placed at relative, absolute or pixel coordinates on the chart and can zoom and pan with the chart.

Tips

Try dragging the mouse on this chart to see the quadrant positions update!

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

JavaScript Chart Examples

2D Charts

Chart Legends

3D Charts
Featured Apps
What's New

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies