Skip to main content

Using DXcharts with React-based apps

For React-based apps, there is a react component called ChartReactApp. For a start, you'll just need to render it as any other react component.

Attach the ChartReactApp component to your application​

import React from 'react';
import { createRoot } from 'react-dom/client';
import { ChartReactApp } from '@dx-private/dxchart5-react/dist/chart/chart-react-app';
import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';
function App() {
    return (
        <div className="App" style={{ height: 576, width: 800 }}>
            <ChartReactApp dependencies={{ ...CREATE_MOCK_PROVIDERS() }} />
        </div>
    );
}
const rootEl = document.getElementById('root');
if (rootEl) {
    const root = createRoot(rootEl);
    root.render(<App />);
}

The container element of the ChartReactApp component should have the height and width in absolute units such as px, or vh, because that's how CSS works. If you want it to be displayed correctly, give it a height 576px and width 800px, for example.

Then, you should see the following. This is the minimum version of the chart with mock data: