Skip to main content

Quick Start - API

dxchart5-react API​

dxchart5-react provides a powerful API to do things with the application in runtime.

Full list of supported API can be found here.

How to use dxchart5-react API​

Our API object is created only after the dxchart5-react application is created, this way we garantee that everything will work as expected. Due to that fact our API object is provided as an argument to a callback function onApiCreated, so you could store 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 <ChartReactApp /> react component​

To store API object reference in react based app you can use useRef concept or useState - it depends on your needs.

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 createChart function​

Same thing with createChart function, but to store API object reference we will use plain variable.

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​

In that article we described supported API which we "support" and guarantee that it works. If you haven't found API method you need you can try Internal API - it gives you access to all dxchart5-react internal codebase.

Further reading​