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;
    };
    limitOfDrawings?: number;
    /**
     * 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.