Overview

Requires DXcharts Core. This feature comes from @dx-private/dxchart5-modules and works only with DXcharts Core (@dx-private/dxchart5-core), not with the open-source DXcharts Lite. This applies to all drawing pages in this section. See Lite or Core.

Drawings in DXcharts Core

This page describes how to integrate and manage the drawings component in dxchart5-core.

Enabling the drawings component

To use drawings, your project must include the @dx-private/dxchart5-modules package. If available, attach the drawings component to the chart using the code below:

export const enableDrawingModule = (chart: Chart) => {
    const chartWithDrawings = attachDrawingsComponent(chart);
}

Starting a drawing

Use the startDrawing method from DrawingsComponent to initiate a drawing.

export const addDrawing = (chart: ChartWithDrawings, type: DrawingType) => {
    const configCopy = cloneUnsafe(DEFAULT_DRAWINGS_CONFIG[type]);
    chart.drawings.startDrawing(configCopy);
}

You must provide a full drawing configuration object to startDrawing. (A simplified version that accepts only a drawing type is planned for future releases.)

To import drawing types from the library:

import { drawingTypes } from '@dx-private/dxchart5-react/dist/chart/model/drawing.model';
import { DEFAULT_DRAWINGS_CONFIG } from '@dx-private/dxchart5-react/dist/config/drawings-config';
// list of default drawing types
console.log(drawingTypes);
// default drawing config for each type - Record<DrawingType, DrawingConfig>
console.log(DEFAULT_DRAWINGS_CONFIG);

Removing a drawing

Call removeDrawing with the drawing ID to delete it from the chart.

export const removeDrawing = (chart: ChartWithDrawings) => {
    const drawingsComponent = chart.drawings;
    const symbol = chart.chartModel.mainCandleSeries.instrument.symbol;
    const lastDrawingModel = lastOf(drawingsComponent.model.models[symbol]);
    lastDrawingModel && drawingsComponent.removeDrawing(lastDrawingModel.id);
}

🔸 Updating a drawing

Use updateDrawing to modify an existing drawing by its ID. In this example, the method toggles the drawing's visibility.

export const updateDrawing = (chart: ChartWithDrawings) => {
    const drawingsComponent = chart.drawings;
    const symbol = chart.chartModel.mainCandleSeries.instrument.symbol;
    const lastDrawingModel = lastOf(drawingsComponent.model.models[symbol]);
    if (lastDrawingModel) {
        lastDrawingModel.visible = !lastDrawingModel.visible;
        lastDrawingModel && drawingsComponent.updateDrawing(lastDrawingModel);
    }
}

Replacing a single drawing

Call setDrawing to override all existing instrument drawings with a new one.

This method does not override drawings added via setDrawings.

export const setDrawing = (chart: ChartWithDrawings) => {
    const symbol = chart.chartModel.mainCandleSeries.instrument.symbol;
    const drawingType: DrawingType = 'gann_box';
    const firstIdx = chart.chartModel.mainCandleSeries.dataIdxEnd - 50;
    const secondIdx = firstIdx - 10;
    const firstDrawingCandle = chart.chartModel.mainCandleSeries.dataPoints[firstIdx]!;
    const secondDrawingCandle = chart.chartModel.mainCandleSeries.dataPoints[secondIdx]!;
    const points = [
        {
            timestamp: firstDrawingCandle.timestamp,
            value: firstDrawingCandle.close + firstDrawingCandle.close * 0.1,
        },
        {
            timestamp: secondDrawingCandle.timestamp + Math.pow(10, 8),
            value: secondDrawingCandle.close - secondDrawingCandle.close * 0.1,
        },
    ];
    const drawing: DrawingModel<DrawingType> = new DrawingModel(
        `${drawingType}_${uuid()}`,
        1,
        drawingType,
        points,
        DEFAULT_DRAWINGS_CONFIG[drawingType].properties,
    );
    chart.drawings.setDrawing(symbol, drawing);
}

Replacing all drawings

Use setDrawings to override all instrument drawings at once.

This method replaces all existing drawings, so use with caution.

export const setDrawings = (chart: ChartWithDrawings) => {
    const symbol = chart.chartModel.mainCandleSeries.instrument.symbol;
    const instrumentDrawings: Drawing<DrawingType>[] = [];
    const drawings: Record<string, Drawing<DrawingType>[]> = { [symbol]: instrumentDrawings };
    const drawingsInitialData: DrawingType[] = ['line', 'rectangle'];
    drawingsInitialData.forEach((drawingType, i) => {
        const firstIdx = chart.chartModel.mainCandleSeries.dataIdxEnd - i * 40;
        const secondIdx = firstIdx - i * 20;
        const firstDrawingCandle = chart.chartModel.mainCandleSeries.dataPoints[firstIdx]!;
        const secondDrawingCandle = chart.chartModel.mainCandleSeries.dataPoints[secondIdx]!;
        const points = [
            {
                timestamp: firstDrawingCandle.timestamp,
                value: firstDrawingCandle.close + firstDrawingCandle.close * 0.1,
            },
            {
                timestamp: secondDrawingCandle.timestamp + Math.pow(10, 8),
                value: secondDrawingCandle.close - secondDrawingCandle.close * 0.1,
            },
        ];
        const figure: DrawingModel<DrawingType> = new DrawingModel(
            `${drawingType}_${i}`,
            1,
            drawingType,
            points,
            DEFAULT_DRAWINGS_CONFIG[drawingType].properties,
        );
        instrumentDrawings.push({ ...figure });
    });
    chart.drawings.setDrawings(drawings);
}

Live example

Custom label formatting

To override the default X-label formatting for drawings, define a custom formatter in the configuration:

export const configDrawingsCutomLabels = {
    components: {
        drawings: {
            xAxisLabelFormat: [
                {
                    format: '',
                    customFormatter: (date: number) => {
                        return new Date(date).toLocaleString('en-GB');
                    },
                },
            ],
        },
    },
}