Skip to main content

Configuring drawings

This page describes how to configure drawings in ChartReactConfig for your application.

Configuration options​

Below is the list of all drawing configuration options in ChartReactConfig.

export interface PartialDrawingsConfig {
    drawingsList?: DrawingGroup[];
    toolbar?: {
        enabled?: boolean;
    };
    sidebar?: {
        enabled?: boolean;
        footer?: {
            magnetMode?: {
                enabled?: boolean;
            },
            drawingMode?: {
                enabled?: boolean;
            },
            synchronizeDrawings?: {
                enabled?: boolean;
            },
            hideAllDrawings?: {
                enabled?: boolean;
            },
            deleteAllDrawings?: {
                enabled?: boolean;
            },
        }
    };
    limitOfDrawings?: number;
    riskReward?: PartialRiskRewardDrawingsConfig;
    /**
     * Important!
     * Couldn't be used along with object tree(layers) component
     */
    drawingGroups?: {
        enabled?: boolean;
    };
}

Enabling and disabling sidebar and toolbar drawings​

You can specify an enable/disable flag to show or hide sidebar or toolbar drawings.

By default, sidebar drawings are enabled and toolbar drawings are disabled.

In this case, for example, if you specify enabled: false in the sidebar configuration, drawings will be hidden from the chart window:

To display a list of drawings in the toolbar, specify enabled: false for the sidebar and enabled: true for the toolbar in the config:

Managing the list of drawings​

To manage the list of drawings available in your application, use the drawingsList value. To create a list of drawings, provide an array of drawing names. If you want to create a custom list of drawings, specify the custom list as follows:

drawingsList: [
	{
		groupName: 'Your group name 1',
		drawings: ['line', 'extended_line'],
	},
	{
		groupName: 'Your group name 2',
		drawings: ['rectangle', 'arc'],
	},
];

The resulting chart will display two groups containing four drawings.

Limit of drawings​

You can configure the maximum number of drawings that can be added to the chart. If the limit is reached, a notification will appear at the top of the chart.

Drawing groups​

To start creating custom drawing groups, enable a groups input:

drawingGroups: {
	enabled: true;
}

When this setting is enabled, a selection box will appear in the bottom right corner of the chart, allowing you to create new drawing groups.

You can specify an enable/disable flag to show or hide buttons in the drawings sidebar footer.

By default, all buttons are enabled.

With the following config:

drawings: {
	sidebar: {
		footer: {
			hideAllDrawings: {
				enabled: false,
			},
			deleteAllDrawings: {
				enabled: false,
			},
		}
	},
},

hideAllDrawings and deleteAllDrawings buttons will be hidden from the drawings sidebar footer.

Measure box and axis labels​

Measure box text (e.g. price change -0.31 (-0.80%)) is generated inside drawing figures — the format is not customizable via API. You can toggle which values appear (bars, date/time, angle, % change) in the drawing settings toolbar when a drawing is selected.

Drawing X/Y axis projection labels (price/time markers on the axes while a drawing is active) use theme palette tokens, not the drawing line color:

  • drawing-label-x-text / drawing-label-x-range-bg — X-axis drawing labels
  • drawing-label-y-bg / drawing-label-y-range-bg — Y-axis drawing labels

Override these in dependencies.palette to match your design. Changing a drawing's line color does not automatically update axis projection label colors.