Skip to main content

Multiple scales

By default, dxcharts-lite displays a single Y-axis and creates one pane with that axis.

To add more Y-axes, use the Extent concept. An Extent is a container that holds a Y-axis component, a ScaleModel, and supporting layout elements.

Use the following API to manage extents:

PaneComponent.createExtentComponent
PaneComponent.createExtentComponent(options: AtLeastOne<YExtentCreationOptions, keyof YExtentCreationOptions>): YExtentComponent

Parameters
options: AtLeastOne<YExtentCreationOptions, keyof YExtentCreationOptions>
Returns
YExtentComponent

API usage​

Add a new extent and series​

export const addExtentAndSeries = (chart: Chart) => {
    const pane = chart.paneManager.panes.CHART;
    const newExtent = pane?.createExtentComponent();
    const dataSeries = newExtent?.createDataSeries();
    if (dataSeries) {
        dataSeries.dataPoints = generateCandlesDataTS({ quantity: 1000 });
        // updateView is necessary to recalculate internal state after the data were set
        pane?.updateView();
    }
}

Merge extents into one​

export const mergeAllExtentsIntoOne = (chart: Chart) => {
    chart.paneManager.panes.CHART?.mergeYExtents();
}

Example​