Skip to main content

Multichart

DXcharts has a multichart functionality. It means you can add up to 8 charts on the screen

Each of the charts is a separate instance of DXcharts 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.

Styling