Zoom Band Chart

This example shows the basic usage of a Zoom Band Chart.

The Zoom Band Chart is attached to an Axis of a separate XY Chart. It will then imitate the Series present in the attached Axis and display them accordingly. The band in Zoom Band Chart can be used to change the view in the XY Chart, making it an easy way to inspect the Series in the Chart.

When attaching to an X Axis, the Zoom Band Chart should be placed in a row either above or below the XY Chart it is attached to.
When attaching to a Y Axis, the Zoom Band Chart should be placed in a column next to the XY Chart it is attached to.

The Zoom Band Chart can only be created as a part of a Dashboard.

The Zoom Band Chart can be created with few simple lines of code:

// Create a new Dashboard with one column and two rows.
const dashboard = lightningChart().Dashboard( {
    numberOfColumns: 1,
    numberOfRows: 2
} )

// Create a new ChartXY inside the Dashboard.
const chart = dashboard.createChartXY( {
    columnIndex: 0,
    columnSpan: 1,
    rowIndex: 0,
    rowSpan: 1
} )

// Create a new Zoom Band Chart inside the Dashboard, and attach to the X Axis of the XY Chart created before.
const zoomBandChart = dashboard.createZoomBandChart( {
    columnIndex: 0,
    columnSpan: 1,
    rowIndex: 1,
    rowSpan: 1,
    axis: chart.getDefaultAxisX()
} )

The band of the Zoom Band Chart can be modified by using ZoomBandChart.band:

// Change the color of the Band.
zoomBandChart.band.setFillStyle( new SolidFill( { color: ColorHEX( '#57a2' ) } ) )