2.6.0 • Published 9 months ago

@devexperts/dxcharts-lite v2.6.0

Weekly downloads
-
License
MPL 2.0
Repository
github
Last release
9 months ago

Overview

Get started with DXCharts Lite, install the library and configure it as you want.

Quick-start

Installation

Install library to your project:

npm install @devexperts/dxcharts-lite

Your package.json after installation:

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

Create chart

If you use webpack or any other bundler - import createChart method and pass element where the chart will be rendered as a first argument.

export const createChartInstance = () => {
	const container = document.getElementById('chart_container');
	const chartInstance = DXChart.createChart(container);
	return chartInstance;
};

createChart - method, that creates a new chart instance using ChartBootstrap class and returns it.

Method accepts 2 parameters:

  • element - The HTML element where the chart will be rendered
  • config (optional) - instance of ChartConfig

Also, please, set width: 100% and height: 100% for parent container by default chart is auto-resizing to parent you can change it by setting fixedSize in config

Now you should have empty chart on screen.

Set data

Let's pass in some data i.e. Candles. You can use bundled function to generate some mock data. Import generateCandlesData and call it to generate candles.

export const generateMockData = () => {
	const candles = generateCandlesData();
	chart.setData({ candles });
};

Now you should see chart just like image below:

HTML-markup

Here is full quick-start code example:

<html>
	<head>
		<script src="https://www.unpkg.com/@devexperts/dxcharts-lite@2.0.1/dist/dxchart.min.js"></script>
		<script type="importmap">
			{
				"imports": {
					"@devexperts/dxcharts-lite/": "https://www.unpkg.com/@devexperts/dxcharts-lite@2.0.1/"
				}
			}
		</script>
	</head>
	<body>
		<div id="chart_container"></div>
	</body>
	<script type="module">
		import generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils';

		// create chart instance, pass parent container as 1st argument
		const container = document.getElementById('chart_container');
		const chart = DXChart.createChart(container);
		// create and set candles data
		const candles = generateCandlesData();
		chart.setData({ candles });
	</script>
</html>

Configuration

You can configure chart with ChartConfig object. It is optional.

ChartConfig is used to set initial properties for chart instance. Below you can see full table of it, and other options, that ChartConfig consists of.

API

Every chart component has an API allowing change a lot of params on the fly. Change appearance at runtime. Subscribe on different events in chart (like HOVER on candle)

Here are the links of the main components:

Examples

We have created a lot of examples with different chart configuration. You can find them here.

Demo

To show you how it's beautiful, we have created Demo version, based on DXCharts Lite. Feel all power of our library!

2.6.0

9 months ago

2.5.6

1 year ago

2.5.5

1 year ago

2.5.8

11 months ago

2.5.7

12 months ago

2.5.4

1 year ago

2.5.3

1 year ago

2.5.2

1 year ago

2.5.1

1 year ago

2.5.0

1 year ago

2.4.6

1 year ago

2.4.5

1 year ago

2.4.4

2 years ago

2.4.3

2 years ago

2.4.2

2 years ago

2.4.1

2 years ago

2.4.0

2 years ago

2.3.0

2 years ago

2.2.0

2 years ago

2.1.0

2 years ago

2.0.2

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago