Quick Start - Providers

dxchart5-react Providers

With providers you can send data to dxchart5-react and vice-versa such as candles, symbols, user data and so on.

Any time you have HTTP call or any other external data fetching, or you have some external storage that should be wired up to dxchart5-react - it's a provider job.

All providers are required to make chart work and you need to implement them on your own.

For demo purposes you can use our mock implementations of the providers from @dx-private/dxchart5-react-mock-providers package.

dxchart5-react has a strict interfaces for a providers, and your implementation of the provider should satisfy that interface to make it work.

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

To help you start with providers we've created a set of mock providers that you can use in your application. This will help you to incrementally implement your own set of providers and still have a working chart.

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>
    );
};

That's pretty much it!

After this you will see working chart with mock data:

dxchart5-react Providers​

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

Further reading​

dxchart5-react Providers

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

Further reading