Skip to main content

Getting started with API

DXcharts React API​

DXcharts React provides a powerful API to do things with the application in runtime.

For the complete list of all supported APIs, go to the API reference.

Using DXcharts React API​

The API object is created only after the DXcharts React application is created. This is how we can guarantee that everything will work as expected.

The API object is provided as an argument to a callback function onApiCreated, and you can store a reference to the API somewhere in your application.

To show you how it works let's create an example where we set the instrument to IBM, change the aggregation to 1h and set chart app theme to light.

Using the ChartReactApp component​

You can use the useRef concept or useState to store an API object reference in a React-based app.

import React, { useCallback, useRef } from 'react';
import { ChartReactApp } from '@dx-private/dxchart5-react/dist/chart/chart-react-app';
import { ChartReactAPI } from '@dx-private/dxchart5-react/dist/chart/view-models/api/chart-react-api.view-model';
import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';
export function App() {
    const chartReactAPI = useRef<ChartReactAPI>();
    const onApiCreated = useCallback((api: ChartReactAPI) => {
        chartReactAPI.current = api;
        chartReactAPI.current.changeInstrument('IBM');
        chartReactAPI.current.changePeriod({ duration: 1, durationType: 'h' });
        chartReactAPI.current.changeTheme('light');
    }, []);
    return (
        <div className="App" style={{ height: 576, width: 800 }}>
            <ChartReactApp
                dependencies={{
                    ...CREATE_MOCK_PROVIDERS(),
                    onApiCreated,
                }}
            />
        </div>
    );
}

Using the createChart function​

The createChart function is similar but we'll use a plain variable to store the API object reference.

import { ChartReactAPI } from '@dx-private/dxchart5-react/dist/chart/view-models/api/chart-react-api.view-model';
import { createChart } from '@dx-private/dxchart5-react/dist/index';
import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';
// append container somewhere in your app
const container = document.createElement('dxcharts-container');
let chartReactAPI: ChartReactAPI | undefined = undefined;
createChart(container, {
    dependencies: {
        ...CREATE_MOCK_PROVIDERS(),
        onApiCreated: api => (chartReactAPI = api),
    },
});
// append buttons somewhere you like in your app
const changeInstrumentButton = document.createElement('button');
const changeAggregationButton = document.createElement('button');
const changeThemeButton = document.createElement('button');
changeInstrumentButton.addEventListener('click', () => {
    chartReactAPI?.changeInstrument('IBM');
});
changeAggregationButton.addEventListener('click', () => {
    chartReactAPI?.changePeriod({ duration: 1, durationType: 'h' });
});
changeThemeButton.addEventListener('click', () => {
    chartReactAPI?.changeTheme('light');
});

Internal API​

We have a description of the API that we support and guarantee that it works. If you haven't found the API method you need, take a look at this description. It will give you access to all internal codebase for DXcharts React.