Getting started with DXcharts React

Video tutorial

To get started on how to integrate DXcharts in your React app hassle-free, check out this video tutorial:

Installation

DXcharts is distributed via ZIP and a private Nexus npm registry.

Our product is not free (except DXcharts Lite) and there are two ways to get an access to it:

• using a ZIP file we provide
• accessing our private npm registry

If you have a ZIP file, go to this tutorial.

Setting up your application

There is a lot of ways you can set up your application. For a start, we recommend using create-react-app or npm create vite.

We highly recommend typescript, because DXcharts is fully typed, and it is much easier to get into.

Installation from Nexus npm registry

First of all, you'll need to login to Nexus:

npm login --registry=https://repo.devexperts.com/repository/dxcharts/

If you are a Devexperts employee, you can use the Devexperts VPN and a different Nexus npm registry for a quicker access:

npm login --registry=https://nexus.in.devexperts.com/repository/npm-dx/

If you're using yarn version 3.x.x, add the following lines to the .yarnrc.yml file:

yarnPath: .yarn/releases/yarn-3.6.0.cjs

nodeLinker: node-modules

npmScopes:
	dx-private:
		npmAlwaysAuth: true
		npmAuthToken: NpmToken.[your auth token here]
	npmRegistryServer: 'https://repo.devexperts.com/repository/dxcharts/'

unsafeHttpWhitelist: - 'repo.devexperts.com'

Installing DXcharts packages

Insert the lines below to install the required DXcharts packages to your project:

npm install @dx-private/dxchart5-modules
npm install @dx-private/dxstudies
npm install @dx-private/dxchart5-react
# or yarn
yarn add @dx-private/dxchart5-modules
yarn add @dx-private/dxstudies
yarn add @dx-private/dxchart5-react

Your package.json file should look like that:

{
	"name": "your-package",
	"dependencies": {
		"@dx-private/dxchart5-modules": "5.6.1",
		"@dx-private/dxchart5-react": "^5.6.1",
		"@dx-private/dxstudies": "52.0.0"
		//...
	}
}

Installing react and react-dom

DXcharts React has react and react-dom packages as peerDependencies. If you don't have them, you'll need to install them to your project to make the library work.

React version requirements

React 17 is no longer supported. dxchart5-react supports React 18.2.0 and higher (recommended version is 19.x.x). React 18 and React 19 are both supported.

See Migration guide for version-specific notes.

npm install --save react react-dom
# or yarn
yarn add react react-dom

Package size

Approximate distribution size for the full dxchart5-react package (figures vary by release):

Format	Size
ZIP archive	~990 KB
Uncompressed	~3,900 KB
Source code	~11,000 KB

For tips on reducing your application bundle size, see Bundling.

Congratulations! Now you are ready to use the DXcharts React library.

Ways to override items in DXCharts

There are 3 ways to override and customize items in DXCharts:

1. Pure CSS overrides — using human-readable classes to style UI elements; use for hiding only when config is not suitable for your goals. See CSS override.
2. Config level overrides — using the config API to show/hide features and control behavior. Preferable for visibility and disabling features. See Config override.
3. uiOverrides — replace entire components with your own (e.g. custom toolbar, logo, menus). Use for more substantial changes. See UI overrides.

Using the DXcharts React library

For provider setup examples, see Provider setup examples.

If you use React, please follow the guide for React-based applications.

If your choice is Vue, you can check the guide for Vue-based applications.

If you like Angular, you can check the guide for Angular-based applications.

If you prefer Vanilla or other not so widely used frameworks, take a look at the Vanilla guide.