Skip to main content

Using DXcharts with Vanilla appsn

You can use DXcharts React as script by importing it to your html file or using npm.

Adding DXcharts React as script​

DXcharts React has a special version called widget for simple applications that don't use any package managers such as npm and wire up third-party packages through a <script> tag. The only thing you need to start it is to call the function called createWidget. This function attaches the chart to a given HTML element.

To learn more about DXcharts React widget and look at examples, go to

NOTE: To use dxchart5-react-widget, you'll need to download a @dx-private/dxchart5-react-widget package.

createWidget function​

After downloading dxchart5-react-widget, add it to your JS folder (for example, your folder with dxchart5-react-widget is ./dxchart.widget/)

Then, add the following two scripts to your html file to wire up dxchart5-react widget:

<script src="./dxchart.widget/dist/index.js"></script>

Here's a basic example:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>DXCharts Vanilla JS</title>
	</head>
	<body>
		<div id="chart-widget" style="width: 800px; height: 500px"></div>
		<script src="./dxchart.widget/dist/index.js"></script>
		<script>
			DXChart.createWidget(document.getElementById('chart-widget'), {});
		</script>
	</body>
</html>

You should see the following:

Configuring DXcharts React widget​

For the full starting chart configuration, initialize ./dxchart.widget/dist/widget.config.d.ts

export interface ChartReactWidgetProps
    extends DataProviderOptions,
        ChartDisplayOptions,
        StudiesOptions,
        FeatureToggleOptionsChartCore,
        FeatureToggleOptionsChartReact,
        ChartStorageOptions,
        ChartTypeOptions,
        ChartThemeOptions,
        DxFeedProvidersOptions,
        WidgetRenderingOptions,
        ChartSettingsOptions {
    readonly dependencies?: ChartReactWidgetDependencies;
    readonly onAPICreated?: (api: ChartReactAPI) => void;
}

The following example shows how to configure width and height, symbol, and chartType for the chart:

<script>
	DXChart.createWidget(
		document.getElementById('chart-widget'),
		{
			width: '800px',
			height: '576px',
			symbol: "MSFT",
			chartType: "line",
		}
	);
</script>

Using the API​

If you want to change something on the chart from your host app, you can use the onAPICreated dependency and pass it to the chart. For the complete list of supported APIs, read the API reference

This is an example of how to use onAPICreated:

<script>
	const onAPICreated = (api) => {
		// Log a message to the console when the chart is created
		api.onChartCreated((chartId, chart) => {
			console.log(`Chart with id ${chartId} created and ready to use api!`)
		});

		// Change the theme of the chart to 'light'
		api.supported.changeTheme('light');

		// Send a notification message to the top of the chart
		api.supported.sendNotification('Your notification message at the top of the chart!');

		// ...other code, depends on your purposes
	}

	DXChart.createWidget(
		document.getElementById('chart-widget'),
		{
			width: '800px',
			height: '576px',
			symbol: "MSFT",
			chartType: "line",
			onAPICreated
		}
	);
</script>

Adding DXcharts React using npm​

First of all, you'll need to install the library using npm. The procedure is described in Getting started Then, import the createChartfunction to attach the ChartReactApp component to a given HTML element.

import { createChart } from '@dx-private/dxchart5-react/dist/index';
// append container somewhere in your app
const container = document.createElement('dxcharts-container');
createChart(container);

Configuring the chart​

The second argument of the createChart function passes the configuration object.

export interface ChartReactProps {
    readonly dependencies: ChartAppDependencies;
    readonly data?: AppProps;
    readonly onApiCreated?: ChartReactAPICreatedCB;
    readonly uiOverrides?: DeepPartialOnlyRecord<UIOverrides>;
}

The example below shows how to pass the configuration object::

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');
createChart(container, {
    dependencies: {
        ...CREATE_MOCK_PROVIDERS(),
        chartReactConfig: {
            drawings: {
                sidebar: {
                    enabled: false,
                },
            },
            toolbar: {
                showButtonsTooltip: true,
            },
        },
        // The palette and colorPalette objects support all common color models: hex, rgb/rgba, hsl/hsla, default strings ('green', 'yellow', etc...),
        // but the most native for chart is rgba, so it's recommended to use it if possible
        colorPalette: [
            'rgb(255,255,0)',
            'rgba(0,0,0,1)',
            '#ad00fa',
            'green',
            'hsl(0, 100%, 50%)',
            'hsla(0, 100%, 64%, 0.2)',
        ],
        initialChartConfig: {
            components: {
                crossTool: {
                    // crosstool supports three types: 'cross-and-labels', 'only-labels' and 'none'
                    type: 'cross-and-labels',
                },
            },
        },
    },
});

With this example, you should see the following:

Using API​

Using API is similar to the widget version, as shown in the example below:

import { createChart } from '@dx-private/dxchart5-react/dist/index';

// append container somewhere in your app
const container = document.createElement('dxcharts-container');

const onAPICreated = api => {
	// Log a message to the console when the chart is created
	api.onChartCreated((chartId, chart) => {
		console.log(`Chart with id ${chartId} created and ready to use api!`);
	});

	// Change the theme of the chart to 'light'
	api.supported.changeTheme('light');

	// Send a notification message to the top of the chart
	api.supported.sendNotification('Your notification message at the top of the chart!');

	// ...other code, depends on your purposes
};

// take a look: function `createChart` returns an object with method `destroy`,
// that allows you to unmount chart at any time
const destroyChart = createChart(container, {
	onApiCreated,
	dependencies: {
		// ...your configuration here
	},
});

// ...another place in your code, you decided to unmount chart after some action
destroyChart.destroy();