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:
- (Preffered) To Style
dropdown
, use the highest component, where theid=root
. Then everything will work fine. - (for custom cases) This one only works when you use
Dropdown
component directly in a render function. Every dropdown acceptscontainer?: Element
as a property, so if you need to styledropdown
from here, you can pass your owncontainer
fordropdown
, and style it from here. But you can always return to the 1.