Skip to main content

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.

Login to the private npm registry​

DXcharts Lite is hosted on a private Nexus repository. To access the package, 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/

Install the package​

Add the dependencies to your package.json

"dependencies": {
	"@devexperts/dxcharts-lite": "2.0.1",
	...
}

Then run your package manager to install it.

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:

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>