Skip to main content

Provider setup examples

This page shows how to wire providers into DXcharts React and provides links to complete implementation examples for all providers. Start with mock providers to get a working chart, then replace them with your own implementations.

Quick start​

1. Start with mock providers​

Use mock providers to make sure your UI and integration are wired correctly:

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

2. Replace mock providers with real ones​

Override mock providers one by one as you implement each interface:

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';
import {
    createMockChartDataProvider,
    createMockSymbolSuggestProvider,
    createMockTradingSessionsProvider,
    createMockNewsDataProvider,
    createMockEventDataProvider,
    createMockChartSharingProvider,
    createMockOrderProvider,
    createMockPositionProvider,
    createMockLayoutProvider,
    createMockUserDataProvider,
    createMockIndicatorsTemplateProvider,
} from '@dx-private/dxchart5-react-mock-providers/dist';
import { createMockDxScriptProvider } from '@dx-private/dxchart5-react/dist/providers/mocks/mock-dx-script-provider';
const createMyChartDataProvider = () => {
    // TODO: Replace this mock with your ChartDataProvider implementation
    // See examples: /Working-with-dxcharts-react-library/Providers/chart-data-provider
    return createMockChartDataProvider();
};
const createMySymbolSuggestProvider = () => {
    // TODO: Replace this mock with your SymbolSuggestProvider implementation
    // See examples: /Working-with-dxcharts-react-library/Providers/symbol-suggest-provider
    return createMockSymbolSuggestProvider();
};
const createMyTradingSessionsProvider = () => {
    // TODO: Replace this mock with your TradingSessionsProvider implementation
    // See examples: /Working-with-dxcharts-react-library/Providers/trading-session-provider
    return createMockTradingSessionsProvider();
};
const createMyNewsDataProvider = () => {
    // TODO: Replace this mock with your NewsDataProvider implementation
    // See examples: /Working-with-dxcharts-react-library/Providers/news-data-provider
    return createMockNewsDataProvider();
};
const createMyEventsDataProvider = () => {
    // TODO: Replace this mock with your EventsDataProvider implementation
    // See examples: /Working-with-dxcharts-react-library/Providers/events-data-provider
    return createMockEventDataProvider();
};
const createMyChartSharingProvider = () => {
    // TODO: Replace this mock with your ChartSharingProvider implementation
    // See examples: /Working-with-dxcharts-react-library/Providers/chart-sharing-provider
    return createMockChartSharingProvider();
};
const createMyOrderProvider = () => {
    // TODO: Replace this mock with your OrderProvider implementation
    // See examples: /Working-with-dxcharts-react-library/Providers/order-provider
    return createMockOrderProvider();
};
const createMyPositionProvider = () => {
    // TODO: Replace this mock with your PositionProvider implementation
    // See examples: /Working-with-dxcharts-react-library/Providers/position-provider
    return createMockPositionProvider();
};
const createMyLayoutProvider = () => {
    // TODO: Replace this mock with your LayoutProvider implementation
    // See examples: /Working-with-dxcharts-react-library/Providers/layout-provider
    return createMockLayoutProvider();
};
const createMyUserDataProvider = () => {
    // TODO: Replace this mock with your UserDataProvider implementation
    // See examples: /Working-with-dxcharts-react-library/Providers/user-data-provider
    return createMockUserDataProvider();
};
const createMyIndicatorsTemplateProvider = () => {
    // TODO: Replace this mock with your IndicatorsTemplateProvider implementation
    // See examples: /Working-with-dxcharts-react-library/Providers/indicator-templates-provider
    return createMockIndicatorsTemplateProvider();
};
const createMyDxScriptProvider = () => {
    // TODO: Replace this mock with your DxScriptProvider implementation
    // See examples: /Working-with-dxcharts-react-library/Providers/dx-script-provider
    return createMockDxScriptProvider();
};
export const ChartReactAppWithCustomProviders = () => {
    const chartDataProvider = createMyChartDataProvider();
    const symbolSuggestProvider = createMySymbolSuggestProvider();
    const tradingSessionsProvider = createMyTradingSessionsProvider();
    const providers = {
        ...CREATE_MOCK_PROVIDERS(),
        chartDataProvider,
        symbolSuggestProvider,
        tradingSessionsProvider,
        newsDataProvider: createMyNewsDataProvider(),
        eventsDataProvider: createMyEventsDataProvider(),
        chartSharingProvider: createMyChartSharingProvider(),
        orderProvider: createMyOrderProvider(),
        positionProvider: createMyPositionProvider(),
        layoutProvider: createMyLayoutProvider(),
        userDataProvider: createMyUserDataProvider(),
        indicatorsTemplateProvider: createMyIndicatorsTemplateProvider(),
        dxScriptProvider: createMyDxScriptProvider(),
    };
    return (
        <div className="App" style={{ height: 576, width: 800 }}>
            <ChartReactApp
                dependencies={providers}
            />
        </div>
    );
};

Provider checklist​

Use this list to verify your setup:

  • chartDataProvider - required for candles and quotes.
  • symbolSuggestProvider - required for instrument search and initial instrument info.
  • tradingSessionsProvider - required for session-based indicators (for example VWAP).
  • layoutProvider, userDataProvider, indicatorsTemplateProvider - required to persist user state.
  • newsDataProvider, eventsDataProvider - optional, enable news and corporate events overlays.
  • orderProvider, positionProvider - optional, required for trading features.
  • chartSharingProvider - optional, required for chart sharing.

Complete provider examples​

The following sections contain links to complete, production-ready examples of provider implementations. Each example includes detailed comments explaining the implementation.

Chart Data Provider​

The Chart Data Provider is the main data provider in DXcharts React. It is responsible for historical candles, last candle updates, quotes, etc. See Chart Data Provider for detailed documentation and implementation examples.

Key features:

  • Fetches historical candle data
  • Provides real-time candle updates
  • Handles quotes and price data
  • Supports lazy loading and data updates
  • Manages multiple aggregations and timeframes

Symbol Suggest Provider​

The Symbol Suggest Provider is responsible for retrieving instrument data. See Symbol Suggest Provider for a complete implementation example using dxFeed IPF endpoint.

Key features:

  • Fetches instruments from an IPF endpoint with authentication
  • Implements smart search ranking - exact symbol matches first, then partial matches
  • Handles crypto instruments - automatically detects and corrects crypto instrument types
  • Caches results and limits response size for performance

Events Data Provider​

The Events Data Provider connects corporate events (earnings, dividends, splits, conference calls) to the chart. See Events Data Provider for a complete implementation example using dxFeed Fundamentals API.

Key features:

  • Fetches corporate events from dxFeed endpoints
  • Fetches data in parallel - requests earnings and corporate actions simultaneously
  • Transforms data from dxFeed format to chart format with proper timestamp conversion
  • Deduplicates events - removes events with identical timestamps
  • Caches responses to avoid duplicate API calls

News Data Provider​

The News Data Provider connects news articles related to instruments. See News Data Provider for a complete implementation example using dxFeed News API.

Key features:

  • Fetches news articles from a dxFeed News endpoint
  • Extracts URLs from news items - either from the url field or by parsing HTML body content
  • Caches responses to avoid duplicate API calls
  • Handles errors gracefully with try-catch and console warnings

Trading Sessions Provider​

The Trading Sessions Provider is responsible for getting trading schedules. See Trading Session Provider for a complete implementation example using dxFeed Schedule API.

Key features:

  • Fetches trading schedules from a dxFeed Schedule endpoint
  • Requests appropriate date ranges - 1 year back for historical data, 14 days forward for holidays
  • Maps session types from dxFeed format to chart format (NO_TRADING, PRE_MARKET, REGULAR, AFTER_MARKET)
  • Extracts timezone information from schedule metadata
  • Caches requests per trading hours string to avoid duplicate API calls
  • Handles browser compatibility - includes fallback timestamp parsing for older browsers

Chart Sharing Provider​

The Chart Sharing Provider handles uploading chart screenshots to a server and returns shareable URLs. See Chart Sharing Provider for a complete implementation example.

Key features:

  • Uploads chart screenshots as Blob objects via FormData POST request
  • Returns shareable URLs that can be used to access the uploaded images
  • Handles special cases - includes port override for Twitter sharing if needed
  • Uses configurable endpoint - allows custom upload URL

Order Provider​

The Order Provider connects trading orders with the chart application, enabling display and management of orders directly on the chart. See Order Provider for a complete implementation example.

Key features:

  • Automatic order execution simulation
  • Integration with real-time chart data
  • Protection orders management (Stop Loss / Take Profit)
  • Executed orders tracking
  • RxJS-based reactive architecture
  • Circular dependency resolution with Position Provider

Position Provider​

The Position Provider manages trading positions on the chart. It works in conjunction with the Order Provider. See Position Provider for a complete implementation example.

Key features:

  • Position creation from executed orders
  • Position averaging logic
  • Protection orders management (Stop Loss / Take Profit)
  • Integration with order provider for protection orders
  • Circular dependency resolution with Order Provider

Important: The Order and Position providers have a circular dependency. You must initialize them in a specific order:

  1. Create chart data provider
  2. Create a wrapper function that will return the order provider (resolves circular dependency)
  3. Create position provider FIRST (pass the wrapper function)
  4. Create order provider SECOND (pass actual position provider instance)

See Order Provider and Position Provider for detailed initialization instructions.

Layout Provider​

The Layout Provider is responsible for saving and retrieving the layout of the chart. See Layout Provider for a complete implementation example using localStorage.

Key features:

  • Saves and retrieves chart layouts
  • Manages multiple user layouts
  • Stores layout snapshots with application state
  • Uses localStorage for persistence (example implementation)

User Data Provider​

The User Data Provider manages user-defined data such as custom aggregations, colors, timeframe presets, and drawing preferences. See User Data Provider for a complete implementation example using localStorage.

Key features:

  • Stores custom aggregations and colors
  • Manages custom timeframe presets
  • Saves favorite and recent drawings
  • Persists UI element positions
  • Uses localStorage for persistence (example implementation)

Indicator Templates Provider​

The Indicator Templates Provider is responsible for saving and retrieving indicator templates. See Indicator Templates Provider for a complete implementation example using localStorage.

Key features:

  • Saves and retrieves indicator template sets
  • Allows users to create multiple templates
  • Enables quick template switching
  • Uses localStorage for persistence (example implementation)

Custom Studies Provider​

The Custom Studies Provider manages user-created custom studies. See Custom Studies Provider for documentation.

Key features:

  • Stores custom study definitions
  • Manages user-created indicators
  • Persists custom study configurations

dxScript Provider and dxScript Runner​

The dxScript Provider and dxScript Runner enable the dxScript editor and custom studies functionality. See dxScript Integration for complete integration examples.

Key features:

  • Connects to dxScript platform API
  • Enables custom study creation and editing
  • Provides script execution capabilities
  • Supports custom indicator development