Skip to main content

Using DXcharts with Vue-based apps

If your application uses Vue as a UI framework, the DXcharts React package has a function called createChart, which attaches the ChartReactApp component to a given HTML element.

Using createChart to create a DXcharts React component​

The createChart function can be used to render ChartReactApp in the usual .vue component.

<!--dxcharts.vue-->
<script setup lang="ts">
	import { onMounted, ref, onUnmounted } from 'vue';
	import { createChart } from '@dx-private/dxchart5-react/dist/index';
	import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';

	const chartContainer = ref();
	let destroyChart = undefined;

	onMounted(() => {
		destroyChart = createChart(chartContainer.value, {
			dependencies: {
				...CREATE_MOCK_PROVIDERS(),
			},
		}).destroy;
	});

	onUnmounted(() => {
		if (destroyChart) {
			destroyChart();
			destroyChart = undefined;
		}
	});
</script>

<template>
	<div class="dxcharts" ref="chartContainer"></div>
</template>

<style scoped>
	.dxcharts {
		height: 100vh;
		width: 100vw;
		min-width: 100vw;
	}

	@media (min-width: 490px) {
		.dxcharts {
			height: 576px;
			width: 800px;
		}
	}
</style>

The container element of the ChartReactApp component should have the height and width in absolute units such as px, or vh, because that's how CSS works. If you want it to be displayed correctly, give it a height 576px and width 800px, for example.

Then, you should see the following. This is the minimum version of the chart with mock data:

How to use ChartReactAPI​

To call the ChartReactAPI methods, save the link to the API object in your application. To do so, you can use the ref() concept or assign the API object reference to a plain variable use in the Vue app. It depends on your application needs.

For the full ChartReactAPI reference, go to the API reference page.

Here's a basic example:

<script setup lang="ts">
	import { onMounted, ref, onUnmounted } from 'vue';
	import { createChart } from '@dx-private/dxchart5-react/dist/index';
	import type {
		ChartReactAPI,
		ChartReactAPICreatedCB,
	} 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';

	const chartContainer = ref();
	const chartReactAPI = ref<ChartReactAPI>();
	let destroyChart = undefined;

	const setChartReactAPIHandler: ChartReactAPICreatedCB = api => {
		chartReactAPI.value = api;
	};

	onMounted(() => {
		destroyChart = createChart(chartContainer.value, {
			dependencies: {
				...CREATE_MOCK_PROVIDERS(),
			},
			onApiCreated: setChartReactAPIHandler,
		}).destroy;
	});

	onUnmounted(() => {
		if (destroyChart) {
			destroyChart();
			destroyChart = undefined;
		}
	});
</script>

<template>
	<div class="dxcharts" ref="chartContainer"></div>
</template>

How to configure the DXcharts React library​

DXcharts React is highly customizable and configurable. Most of the time, you'd want to customize it for your needs.

For all things related to configuration, refer to the Configuration guide.

<script setup lang="ts">
	import { onMounted, ref, onUnmounted } from 'vue';
	import { createChart } from '@dx-private/dxchart5-react/dist/index';
	import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';

	const chartContainer = ref();
	let destroyChart = undefined;

	onMounted(() => {
		destroyChart = createChart(chartContainer.value, {
			dependencies: {
				...CREATE_MOCK_PROVIDERS(),
				chartReactConfig: {
					toolbar: {
						enabled: false,
					},
				},
			},
	           ...
		}).destroy;
	});

	onUnmounted(() => {
		if (destroyChart) {
			destroyChart();
			destroyChart = undefined;
		}
	});
</script>

<template>
	<div class="dxcharts" ref="chartContainer"></div>
</template>