Skip to main content

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.

The DXcharts React library works only with "react": "17.x.x" and "react-dom": "17.x.x" or higher.

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

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.