Using DXcharts React with Angular-based apps

To use a React library inside an Angular component, you'll need to embed React components within Angular.
Here is a step-by-step guide to get you going:

Create the following three files

MyReactWrapper.tsx

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";

interface Props {
  someProp: string;
}

const MyReactWrapper: React.FC<Props> = () => {
  return (
    <div className="App" style={{ height: 576, width: 800 }}>
      <ChartReactApp dependencies={{ ...(CREATE_MOCK_PROVIDERS() as any) }} />
    </div>
  );
};

export default MyReactWrapper;

renderReactComponent.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import MyReactWrapper from './MyReactWrapper';

export function renderReactComponent(element: HTMLElement, props: { someProp: string }) {
	const root = ReactDOM.createRoot(element);
	root.render(<MyReactWrapper {...props} />);
	return () => root.unmount(); // cleanup function
}

react-wrapper.component.ts (Angular file)

import {
  Component,
  ElementRef,
  AfterViewInit,
  OnDestroy,
  ViewChild,
} from '@angular/core';
import { renderReactComponent } from './renderReactComponent';

@Component({
  selector: 'app-react-wrapper',
  template: `<div #reactContainer></div>`,
})
export class ReactWrapperComponent implements AfterViewInit, OnDestroy {
  @ViewChild('reactContainer', { static: true }) containerRef!: ElementRef;

  private cleanup: (() => void) | undefined;

  ngAfterViewInit() {
    this.cleanup = renderReactComponent(this.containerRef.nativeElement, {
      someProp: 'Hello from Angular!',
    });
  }

  ngOnDestroy() {
    if (this.cleanup) {
      this.cleanup();
    }
  }
}

After that, include <app-react-wrapper></app-react-wrapper> in your index.html.

Your package.json file should look like this:

{
	"dependencies": {
		"@angular/common": "^19.2.0",
		"@angular/compiler": "^19.2.0",
		"@angular/core": "^19.2.0",
		"@angular/forms": "^19.2.0",
		"@angular/platform-browser": "^19.2.0",
		"@angular/platform-browser-dynamic": "^19.2.0",
		"@angular/router": "^19.2.0",
		"@devexperts/dxcharts-lite": "^2.7.6",
		"@dx-private/dxchart5-modules": "^5.14.7",
		"@dx-private/dxchart5-react": "^5.14.7",
		"@dx-private/dxstudies": "^59.0.1747920660503",
		"@dx-private/dxchart5-react-mock-providers": "1.0.1",
		"react": "18.3.0",
		"react-dom": "18.3.0",
		"rxjs": "~7.8.0",
		"tslib": "^2.3.0",
		"zone.js": "~0.15.0"
	},
	"devDependencies": {
		"@angular-devkit/build-angular": "^19.2.13",
		"@angular/cli": "^19.2.13",
		"@angular/compiler-cli": "^19.2.0",
		"@types/jasmine": "~5.1.0",
		"@types/react": "^19.1.6",
		"@types/react-dom": "^19.1.5",
		"jasmine-core": "~5.6.0",
		"karma": "~6.4.0",
		"karma-chrome-launcher": "~3.2.0",
		"karma-coverage": "~2.2.0",
		"karma-jasmine": "~5.1.0",
		"karma-jasmine-html-reporter": "~2.1.0",
		"typescript": "~5.7.2"
	}
}

Then, you should see the following:

That is the bare minimum usage option with mock data.

Possible issues

Module './renderReactComponent' was resolved to 'angular-app/src/app/renderReactComponent.tsx', but '--jsx' is not set.ts(6142)

This error happens because TypeScript doesn’t know how to handle .tsx files by default in an Angular project, since Angular projects typically use .ts files only and don’t enable JSX support.
To fix this, navigate to tsconfig.json and add:

"compilerOptions": {
	"jsx": "react-jsx",

Error inside renderReactComponent.tsx Internal server error: Failed to resolve import "react-dom/client" from ".angular/vite-root/angular-app/main.js". Does the file exist?

An Angular app runs with Vite, and Vite doesn't recognize react-dom/client (or other React modules) unless they are properly installed and Vite is configured to handle React correctly. The react-dom/client import is only available in React 18+. In this case, update to React 18+. If you are on an older version, you can use a "react-compatible" vite plugin such as "@vitejs/plugin-react".

Configuring the DXcharts React library

DXcharts React is highly customizable and configurable. Most of the time, you'd want to customize it for your needs.

For all things related to configuration, refer to the Configuration guide.

Create the following three files​

Possible issues​

Configuring the DXcharts React library​

Read next​

Create the following three files

Possible issues

Configuring the DXcharts React library

Read next