Multichart

DXCharts has a multichart functionality, i.e. you can add up to 8 charts on the screen

Each of the charts would be a separate instance of Chart React

Multichart layouts

There are currently 7 layouts available:

• 1x1
• 2x2
• 2x1
• 1x2
• 3x1
• 1x3
• 2x4

Synchronization options

Though separate charts its useful to synchronize some of their data

There are several options:

• Instrument
• Chart type
• Aggregation period
• Appearance
• Studies

When turning sync ON all charts will share the selected option

When syncing period, charts will also move synchronously by X axis, having the same timeframe viewport

Styling

Dropdown component for switching multichart UI is MultichartSettingsDropdown

The general idea of styling customization is the same - cascading styles using styled-components package

For example, we need to style MultichartSettingsDropdown content.

Because MultichartSettingsDropdown is wrapped with the context we can't just use styled(MultichartSettingsDropdown). Moreover, we have a problem, because Dropdowns by default are mounted to the HTMLElement with the id="root", so, to make cascade styling of dropdown with styled-components works correctly, we have two ways:

1. (Preffered) To Style dropdown, use the highest component, where the id=root. Then everything will work fine.
2. (for custom cases) This one only works when you use Dropdown component directly in a render function. Every dropdown accepts container?: Element as a property, so if you need to style dropdown from here, you can pass your own container for dropdown, and style it from here. But you can always return to the 1.

Further reading

Styling