Skip to main content

Component overriding

Component overriding (via uiOverrides) gives you a straightforward way to provide your own components to replace the default ones. It is one of three ways to customize the chart: use Config override only if you need to show/hide or tune features, and CSS override for simple styling of individual elements. See Getting started for an overview of all three options.

Component overriding only works for React components.

Using component overrides

In general, you need to pass to your ChartReactApp component uiOverrides prop and then provide your custom components as a value.

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 const YourApp = () => {
return (
<ChartReactApp /*uiOverrides={...your_overriden_components_here} dependencies={...your_dependencies_here } */
dependencies={{ ...CREATE_MOCK_PROVIDERS() }}
/>
);
};