Config override
Config level overrides are the preferred way to customize the chart. Use the config API to show/hide features, enable or disable buttons, and adjust behavior of elements we expose. Use it freely for most customization needs.
Other ways to customize
- Use CSS override for styling UI elements; use it for hiding only when config is not suitable for your goals.
- Use UI overrides when you need to fully replace a component (e.g. custom toolbar or logo).
When to use config
- Enabling or disabling the toolbar, drawings sidebar, studies, trading, etc.
- Showing or hiding specific toolbar buttons or right-click menu items.
- Controlling settings tabs and their options.
- Configuring timeframe presets, layout, multichart, data export, and other high-level features.
Config is applied at initialization via dependencies.chartReactConfig (and optionally dependencies.initialChartConfig for chart-core options). Elements controlled by config are “locked” for end users when you disable or hide them.
Example
Pass chartReactConfig (and optionally initialChartConfig) in dependencies of ChartReactApp:
import React from 'react';import { ChartReactApp } from '@dx-private/dxchart5-react/dist/chart/chart-react-app';import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';export function App() {return (<div className="App" style={{ height: 576, width: 800 }}><ChartReactAppdependencies={{...CREATE_MOCK_PROVIDERS(),chartReactConfig: {drawings: {sidebar: {enabled: false,},},toolbar: {showButtonsTooltip: true,},},// The palette and colorPalette objects support all common color models: hex, rgb/rgba, hsl/hsla, default strings ('green', 'yellow', etc...),// but the most native type for chart is rgba, so it's recommended to use it if possiblecolorPalette: ['rgb(255,255,0)','rgba(0,0,0,1)','#ad00fa','green','hsl(0, 100%, 50%)','hsla(0, 100%, 64%, 0.2)',],initialChartConfig: {components: {crossTool: {// crosstool supports three types: 'cross-and-labels', 'only-labels' and 'none'type: 'cross-and-labels',},},},}}/></div>);}
This example disables the drawings sidebar and enables tooltips for toolbar buttons. You can combine any number of config options.
Full config reference
The config shape is defined by PartialChartReactConfig (and related types). The object below is the default config (DEFAULT_INIT_CHART_REACT_CONFIG) from the library — you pass a partial config in chartReactConfig; only set the keys you need, the rest are merged with defaults. For type definitions and detailed tables, see the API reference for configuration.
{"toolbarMode": "single","rtl": false,"disableWorkers": false,"themeControls": {"enabled": true},"layout": {"saveDelay": 150,"enabled": true},"studyTemplates": {"enabled": true},"dataExport": {"enabled": true},"multiChart": {"enabled": true,"maxChartsAmount": 8,"options": {"layout": {"enabled": true},"symbol": {"enabled": true},"chartType": {"enabled": true},"timeframeRange": {"enabled": true},"appearance": {"enabled": true},"indicators": {"enabled": true},"crosshair": {"enabled": true},"drawings": {"enabled": true}}},"trading": {"enabled": true,"addNewOrderEnabled": true,"showPriceAsLabels": false,"rightOffset": 40,"takeProfitStopLossEnabled": true,"defaultOrderQuantity": 100,"quantityPrecision": 0,"quantityStep": 1,"minOrderQuantity": 0,"maxOrderQuantity": 1000,"currency": "$","orderTypes": {"market": true,"limit": true,"stop": true}},"studies": {"maxSelectedStudiesCount": 10,"dxScriptEnabled": true,"addStudyButtonEnabled": false},"drawings": {"drawingsList": [{"groupName": "LineDrawings","drawings": ["line","extended_line","horizontal_line","info_line","arrow","horizontal_ray","ray","vertical_line","trend_channel","range_volume_by_price","anchored_volume_by_price"]},{"groupName": "Geometric Drawings","drawings": ["ellipse","rectangle","curve","arc","path","vertical_arrow_up","vertical_arrow_down","cycle_brackets"]},{"groupName": "Text Drawings","drawings": ["price_label","callout","icon","text"]},{"groupName": "Brush and highlighter","drawings": ["brush","highlighter"]},{"groupName": "Fibonacci and Gann Drawings","drawings": ["pitchfork","fibonacci_rays","fibonacci_ark","fibonacci_circles","fibonacci_retracements","fibonacci_projection","fibonacci_channel","fibonacci_time_zones","fibonacci_time_extension","fibonacci_time_ratios","gann_square","gann_box","gann_fan","regression_trend","fibonacci_spiral"]},{"groupName": "Elliott Drawings","drawings": ["elliott_wave","elliott_correction_wave"]},{"groupName": "Range Drawings","drawings": ["price_range","date_range","date_price_range"]}],"toolbar": {"enabled": false},"sidebar": {"enabled": true,"footer": {"magnetMode": {"enabled": true},"drawingMode": {"enabled": true},"synchronizeDrawings": {"enabled": true},"hideAllDrawings": {"enabled": true},"deleteAllDrawings": {"enabled": true}}},"drawingGroups": {"enabled": false},"limitOfDrawings": 9007199254740991},"toolbar": {"enabled": true,"showButtonsTooltip": true,"buttons": {"aggregationPeriod": {"enabled": true},"chartType": {"enabled": true},"drawings": {"enabled": false},"compareChart": {"enabled": true},"studies": {"enabled": true},"indicatorTemplates": {"enabled": true},"multichart": {"enabled": true},"layout": {"enabled": true},"layers": {"enabled": true},"export": {"enabled": true},"snapshot": {"enabled": true},"settings": {"enabled": true},"maximize": {"enabled": true},"marketState": {"enabled": true},"scalingTool": {"enabled": true}}},"settingsTabs": {"general": {"enabled": true,"options": {"highAndLow": {"enabled": true},"horizontalGrid": {"enabled": true},"verticalGrid": {"enabled": true},"candleWick": {"enabled": true},"showClosePrice": {"enabled": true},"watermark": {"enabled": true},"crosshair": {"enabled": true}}},"trading": {"enabled": true,"options": {"tradingFromChart": {"enabled": true},"showOrders": {"enabled": true},"showPositions": {"enabled": true},"showExecutedOrders": {"enabled": true}}},"legend": {"enabled": true,"options": {"instrumentName": {"enabled": true},"ohlcValues": {"enabled": true},"volume": {"enabled": true},"period": {"enabled": true}}},"scales": {"enabled": true,"options": {"autoScale": {"enabled": true},"fitStudies": {"enabled": true},"fitPositions": {"enabled": true},"fitOrders": {"enabled": true},"invertScale": {"enabled": true},"lockPriceToBarRatio": {"enabled": true},"axisType": {"enabled": true},"axisAlign": {"enabled": true},"labelsAndLinesPopover": {"enabled": true}}},"market": {"enabled": true,"options": {"sessionBreaks": {"enabled": true},"extendedHours": {"enabled": true},"alignDataToSessionStart": {"enabled": true},"priceType": {"enabled": true},"volume": {"enabled": true},"volumeType": {"enabled": true}}},"colors": {"enabled": true,"options": {"themeSwitcher": {"enabled": true}}},"events": {"enabled": true,"options": {"eventsOnChart": {"enabled": true},"dividends": {"enabled": true},"splits": {"enabled": true},"earnings": {"enabled": true},"conferenceCalls": {"enabled": true},"news": {"enabled": true}}},"paddings": {"enabled": true,"options": {"top": {"enabled": true},"right": {"enabled": true},"bottom": {"enabled": true}}}},"yAxisControls": {"enabled": true},"instrumentSuggest": {"visible": true,"enabled": true},"actionsHistory": {"undoKeyCode": "KeyZ","redoKeyCode": "KeyZ","limit": 20},"popups": {"showOutside": true},"layers": {"enabled": true},"timeframePresets": {"mode": "full"},"customPeriodInput": {"enabled": true},"chartDataOptionsSettings": {"sessionBreaks": {"enabled": true},"extendedHours": {"enabled": true},"priceType": {"enabled": true},"candlesAlignment": {"enabled": true},"maxCandlesCount": 9007199254740991},"dataTimeout": 12000,"priceTypes": ["last","mark","bid","ask"],"autoApplyPriceType": true,"shouldInitLayoutScale": true,"timezoneControls": {"enabled": true},"watermark": {"mode": "instrument"},"rightClickMenu": {"tradingButtons": {"showMarketPrice": true,"showLimitPrice": true,"showStopPrice": true},"backgroundMenu": {"buyMarketButton": {"enabled": true},"sellMarketButton": {"enabled": true},"buyLimitButton": {"enabled": true},"sellLimitButton": {"enabled": true},"crosshairCheckbox": {"enabled": true},"sessionBreaksCheckbox": {"enabled": true},"extendedHoursCheckbox": {"enabled": true},"watermarkCheckbox": {"enabled": true},"gridPopover": {"enabled": true},"themePopover": {"enabled": true},"recentDrawingsPopover": {"enabled": true},"hideDrawingsCheckbox": {"enabled": true},"clearDrawingsButton": {"enabled": true},"clearIndicatorsButton": {"enabled": true},"settingsButton": {"enabled": true},"resetChartButton": {"enabled": true}},"dataMenu": {"chartTypePopover": {"enabled": true},"priceTypePopover": {"enabled": true},"colorPickerItem": {"enabled": true},"bringToFrontButton": {"enabled": true},"sendToBackButton": {"enabled": true}},"studiesMenu": {"bringToFrontButton": {"enabled": true},"sendToBackButton": {"enabled": true},"duplicateStudyButton": {"enabled": true},"hideStudyButton": {"enabled": true},"moveToPaneAboveButton": {"enabled": true},"moveToPaneBelowButton": {"enabled": true},"pinToScalePopover": {"enabled": true},"configureStudyButton": {"enabled": true}},"drawingsMenu": {"bringToFrontButton": {"enabled": true},"bringForwardButton": {"enabled": true},"sendBackwardButton": {"enabled": true},"sendToBackButton": {"enabled": true},"lockDrawingButton": {"enabled": true},"hideDrawingButton": {"enabled": true}},"legendMenu": {"instrumentNameCheckbox": {"enabled": true},"ohlcValuesCheckbox": {"enabled": true},"volumeCheckbox": {"enabled": true},"periodCheckbox": {"enabled": true}},"yAxisMenu": {"autoScaleCheckbox": {"enabled": true},"fitOrdersCheckbox": {"enabled": true},"fitPositionsCheckbox": {"enabled": true},"fitStudiesCheckbox": {"enabled": true},"invertScaleCheckbox": {"enabled": true},"lockPriceToBarRatioCheckbox": {"enabled": true},"axisAlignButton": {"enabled": true},"regularAxisTypeCheckbox": {"enabled": true},"percentAxisTypeCheckbox": {"enabled": true},"logarithmicAxisTypeCheckbox": {"enabled": true},"labelsAndLinesPopover": {"enabled": true}}},"floatingButtons": {"zoom": {"enabled": true},"returnToNow": {"enabled": true},"movePaneButtons": {"enabled": true}}}
Read next
- Configuration and main concepts — initials, configs, and providers.
- CSS override — for one-off styling when config is not enough.
- UI overrides — for replacing whole components.