Getting started with providers in DXcharts React

Providers are entities used for sending data to and receiving data from DXcharts React. These data can include candles, symbols, user information, etc.

For example, providers deal with HTTP calls, fetch external data, or connect external storages to DXcharts React.

To make charts work, you will need all providers listed in the Providers section. You will need to implement all of them on your own, and you will learn more on how to do it in the articles dedicated to each provider.

We suggest using our mock implementations of providers from the @dx-private/dxchart5-react-mock-providers package for demo purposes.

DXcharts React has strict requirements to the provider interfaces, so your implementation of the providers must be in line with them to make it work.

Mock providers from `@dx-private/dxchart5-react-mock-providers`

There is a set of mock providers to help get you started with this concept. You can use them in your application. Using them will help you implement your own set of providers step by step, and still have a working chart at the same time.

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';
export const ChartReactAppWithMockProviders = () => {
    return (
        <div className="App" style={{ height: 576, width: 800 }}>
            <ChartReactApp
                dependencies={{
                    ...CREATE_MOCK_PROVIDERS(),
                }}
            />
        </div>
    );
};

You will see a working chart with mock data:

Mock providers from @dx-private/dxchart5-react-mock-providers​

Read next​

Mock providers from `@dx-private/dxchart5-react-mock-providers`

Read next