Skip to main content

CSS override

Use pure CSS overrides for styling UI elements (appearance, colors, spacing, etc.). For hiding or enabling/disabling features, prefer config; use CSS to hide only when config is not suitable for your goals (e.g. no such option, or you need different control). For more substantial changes (replacing a whole component), use UI overrides.

How to choose
  • Config override — use for showing/hiding features and controlling behavior (toolbar buttons, menus, sidebar, etc.). Prefer this for visibility.
  • CSS override — use for styling (look and feel). Use CSS for hiding only when config is not suitable for your goals.
  • UI overrides — use when you need to replace an entire component (e.g. custom toolbar or logo).

When to use CSS override​

  • Styling — changing the appearance of specific items (colors, size, spacing, borders, opacity) without replacing the component.
  • Hiding an element — only when config is not suitable for that (e.g. no such option, or you need different control); otherwise use config for visibility.

Example: styling and hiding when config is not suitable​

DXcharts renders UI elements with human-readable CSS class names. You can target them in your styles. Use CSS for styling; use CSS for hiding only when config is not suitable for your goals (e.g. no such option, or you need different control).

Styling (main use):

/* Scope by your chart container to avoid affecting other charts */
.my-chart-wrapper .FooterTimeframePresets {
	opacity: 0.8;
	border-radius: 4px;
}

Hiding (when config hiding is not suitable):

.my-chart-wrapper .SomeButton {
	display: none;
}

Apply your CSS so it only affects the chart: wrap ChartReactApp in a div with a class (e.g. my-chart-wrapper) and write selectors like .my-chart-wrapper .ClassName.

How to find class names​

You can discover which classes to override in two ways:

1. Browser DevTools​

  1. Open your app with the chart.
  2. Right-click the element you want to change and choose “Inspect” (or “Inspect Element”).
  3. In the Elements/DOM panel, look at the class attribute of the element or its parents. DXcharts uses readable names (e.g. SettingsButton, FooterTimezone, DataMenu), so you can often guess or spot the right one.

2. Library export (COMPONENTS_CLASSNAME)​

The chart library exports a constant with all human-readable class names. You can import it in your app to reference class names in code (e.g. when generating CSS or when using a CSS-in-JS solution):

// From package root (when the export is available):
import { COMPONENTS_CLASSNAME } from '@dx-private/dxchart5-react';
// Or from the chart module:
import { COMPONENTS_CLASSNAME } from '@dx-private/dxchart5-react/dist/chart/classes';

// Examples: COMPONENTS_CLASSNAME.toolbar.settings === 'SettingsButton'
//           COMPONENTS_CLASSNAME.footer.timezone === 'FooterTimezone'

Use these values as CSS class selectors (e.g. .SettingsButton, .FooterTimezone). Scoping under your chart wrapper is recommended.

Reference: all available class names​

The content below is generated from the library’s COMPONENTS_CLASSNAME export so it stays in sync with the version you use.

{
  "menu": {
    "background": "BackgroundMenu",
    "secondarySeries": "SecondarySeriesMenu",
    "legend": "LegendMenu",
    "data": "DataMenu",
    "drawings": "DrawingsMenu",
    "studies": "StudiesMenu",
    "yAxis": "YAxisMenu",
    "yAxisLabels": "YAxisLabelsMenu"
  },
  "selector": {
    "timeframeAggregation": "TimeframeAggregationSelector"
  },
  "popover": {
    "iconsDrawing": "IconsDrawingPopover",
    "timezoneList": "TimezoneListPopover",
    "drawingsToolbar": "DrawingsToolbar",
    "layers": "LayersPopover",
    "marketState": "MarketStatePopover",
    "backgroundMenuTheme": "BackgroundMenuThemePopover",
    "backgroundMenuRecentDrawings": "BackgroundMenuRecentDrawingsPopover",
    "dataMenuChartType": "DataMenuChartTypePopover",
    "dataMenuPriceType": "DataMenuPriceTypePopover",
    "timeframePreset": "TimeframePresetPopover",
    "event": "EventPopover",
    "symbolSuggest": "SymbolSuggestPopover"
  },
  "dropdown": {
    "aggregationPeriod": "AggregationPeriodDropdown",
    "chartType": "ChartTypeDropdown",
    "indicatorTemplates": "IndicatorTemplatesDropdown",
    "layout": "LayoutDropdown",
    "multicharts": "MultiChartDropdown",
    "snapshot": "SnapshotDropdown",
    "settings": "SettingsDropdown"
  },
  "popup": {
    "studies": "StudiesPopup",
    "drawings": "DrawingsPopup",
    "drawing": "DrawingPopup",
    "codeEditor": "CodeEditorPopup"
  },
  "legend": "Legend",
  "trading": {
    "closeOrder": "CloseOrderButton"
  },
  "toolbar": {
    "aggregationPeriod": "AggregationPeriodButton",
    "chartType": "ChartTypeButton",
    "drawings": "DrawingsButton",
    "compare": "CompareButton",
    "studies": "StudiesButton",
    "indicatorTemplates": "IndicatorTemplatesButton",
    "multichart": "MultichartButton",
    "layout": "LayoutButton",
    "layers": "LayersButton",
    "export": "ExportButton",
    "snapshot": "SnapshotButton",
    "settings": "SettingsButton",
    "maximize": "MaximizeButton",
    "marketState": "MarketStateButton",
    "scalingTool": "ScalingToolButton"
  },
  "sidebar": {
    "footer": {
      "magnet": "SidebarMagnetButton",
      "drawingMode": "SidebarDrawingModeButton",
      "syncDrawings": "SidebarSyncDrawingsButton",
      "hideDrawings": "SidebarHideDrawingsButton",
      "deleteDrawings": "SidebarDeleteDrawingsButton"
    },
    "drawingPrefix": "SidebarDrawing-"
  },
  "footer": {
    "timezone": "FooterTimezone",
    "timeframePresets": "FooterTimeframePresets",
    "yAxisControls": "FooterYAxisControls",
    "drawingGroups": "FooterDrawingGroups"
  },
  "floatingButtons": {
    "zoomIn": "FloatingZoomInButton",
    "zoomOut": "FloatingZoomOutButton",
    "returnToNow": "FloatingReturnToNowButton",
    "movePaneButtons": "MovePaneButtonsContainer",
    "movePaneUp": "MovePaneUpButton",
    "movePaneDown": "MovePaneDownButton"
  }
}
  • Config override — preferred way to control visibility and behavior.
  • UI overrides — replace entire components when you need full control.