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:

Next.js and Electron​

DXcharts is a client-side React component. Customers integrate it with Next.js and Electron, but we do not ship or officially test a dedicated quick start for either environment.

Next.js: Mount ChartReactApp only in the browser — use a client component ('use client' in the App Router) or next/dynamic with { ssr: false }. The chart relies on browser APIs (canvas, Web Workers, localStorage). You may need extra bundler configuration for workers and ESM dependencies; see Bundling. Set chartReactConfig.disableWorkers: true only if workers cause issues in your setup.

Electron: Use it in the renderer process like a normal React SPA. Strict Content-Security-Policy can block the chart.

Timezone parsing can use blob Workers — you may need worker-src blob:.