Quick Start

DXcharts Lite is a JavaScript UI charting framework for visualizing real-time and historical financial data. Built with HTML5 Canvas, it delivers fast, interactive charts for everything, from simple widgets to full-scale trading platforms.

It uses Candle as the primary data format and displays a candle chart by default.

Lite or Core

This section describes the canvas chart that is available as two packages. Their APIs are almost the same, but the packages are developed separately and can differ slightly:

	DXcharts Lite	DXcharts Core
Package	`@devexperts/dxcharts-lite`	`@dx-private/dxchart5-core`
Distribution	Free, open-source, GitHub	Part of the DXcharts Library (5.20.4 and higher), private registry or ZIP file
How you get it	Install it yourself	Installed automatically with `@dx-private/dxchart5-react`

Use DXcharts Lite if you need a standalone canvas chart without the DXcharts Library, for example a simple chart widget in your own UI.

Use DXcharts Core if you use the DXcharts Library (dxchart5-react, dxchart5-modules) and want to work with the chart engine directly: chart API, configuration, custom drawers, label providers, etc. Features from dxchart5-modules, such as drawings, also require DXcharts Core: starting from 5.20.4, they don't work with DXcharts Lite.

Pages about features that are available only in DXcharts Core, such as drawings, studies or magnifying tools, are marked with a Requires DXcharts Core note, and their examples import from @dx-private/dxchart5-core.

All other examples in this section import from @devexperts/dxcharts-lite and work with both packages. With DXcharts Core, replace @devexperts/dxcharts-lite with @dx-private/dxchart5-core, including deep imports:

// DXcharts Lite
import { Candle } from '@devexperts/dxcharts-lite/dist/chart/model/candle.model';
// DXcharts Core
import { Candle } from '@dx-private/dxchart5-core/dist/chart/model/candle.model';

Note: Don't install both packages in a project that uses the DXcharts Library. The library works only with @dx-private/dxchart5-core, and objects created with @devexperts/dxcharts-lite are not compatible with it. For details, see the Migration guide.

Install the package

DXcharts Lite

DXcharts Lite is published on the public npm registry:

npm install @devexperts/dxcharts-lite

DXcharts Core

DXcharts Core is installed automatically with @dx-private/dxchart5-react, see Quick start for DXcharts React. The package is hosted on a private Nexus repository, so you must first authenticate.

If you're outside the Devexperts VPN:

npm login --registry=https://repo.devexperts.com/repository/dxcharts/

If you're inside the Devexperts VPN:

npm login --registry=https://nexus.in.devexperts.com/repository/npm-dx/

Add @dx-private/dxchart5-core to your package.json only if your code imports from it directly. Use the same version as @dx-private/dxchart5-react.

Create a chart

If you're using webpack or another bundler, import the createChart method and pass the element where the chart will be rendered as the first argument:

export const createChart = () => {
    const container = document.getElementById('chart_container') as HTMLElement;
    const chart = new Chart(container);
    return chart;
}

If you're not using a bundler, include the dxchart.js file directly in you HTML page

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

Then initialize the chart using the global DXChart object:

export const createChart = () => {
    const container = document.getElementById('chart_container');
    const chart = new DXChart.ChartBootstrap(container);
    return chart;
}

The createChart method creates a new chart instance using ChartBootstrap class and returns it.

It accepts two parameters:

element - HTML container element
config (optional) - instance of Chart configuration

Note: Set width: 100% and height: 100% for the parent container. By default, the chart auto-resizes to the parent, but you can change this by setting fixedSize in the config.

You should now see an empty chart on the screen.

Set data

To display data (e.g. Candles), you can use the bundled function to generate mock data. Import generateCandlesData and use it to generate candles.

You'll also need to provide an Instrument object to display instrument details and configure the Y-axis price scale.

export const generateMockData = () => {
    const mockCandles = DXChart.generateCandlesData();
    const mockInstrument = {
        symbol: 'AAPL',
        priceIncrements: [0.01],
    };
    chart.setData(mockCandles, mockInstrument);
}

You should now see a basic chart like the image below:

HTML markup

Here is a complete quick-start code example:

<html>
	<head>
		<script src="dist/dxchart.js"></script>
		<script src="dist/chart/utils/candles-generator.js"></script>
	</head>
	<body>
		<div id="chart_container"></div>
	</body>
	<script>
		// create chart instance, pass parent container as 1st argument
		const chart = new DXChart.ChartBootstrap(document.getElementById('chart_container'));
		// create and set candles data
		const mockCandles = DXChart.generateCandlesData();
		chart.setData({ mockCandles });
	</script>
</html>

Lite or Core​

Install the package​

DXcharts Lite​

DXcharts Core​

Create a chart​

Set data​

HTML markup​