Vue Chart - Overview
A series is a collection of related data points.
The most important characteristic of a series is its type. The Chart provides over 20 series types, and all of them are described in the Series Types article. You can specify the type of a series using its type property.
- <template>
- <DxChart ... >
- <DxSeries type="bar"/>
- </DxChart>
- </template>
- <script>
- import DxChart, {
- DxSeries
- } from 'devextreme-vue/chart';
- export default {
- components: {
- DxChart,
- DxSeries
- }
- }
- </script>
A single Chart can contain several series at once. In this case, the series property accepts an array of series objects. To enable a user to identify a series among others on the chart legend, specify its name.
- <template>
- <DxChart ... >
- <DxSeries
- ...
- type="bar"
- name="Men" />
- <DxSeries
- ...
- type="area"
- name="Women" />
- </DxChart>
- </template>
- <script>
- import DxChart, {
- DxSeries
- } from 'devextreme-vue/chart';
- export default {
- components: {
- DxChart,
- DxSeries
- }
- }
- </script>
Objects in the series array specify individual settings for series. You can also specify common settings for all chart series using the commonSeriesSettings object. Individual series settings override common settings.
- <template>
- <DxChart ... >
- <DxSeries ... >
- <!-- high priority -->
- </DxSeries>
- <DxCommonSeriesSettings ... >
- <!-- low priority -->
- </DxCommonSeriesSettings>
- </DxChart>
- </template>
- <script>
- import DxChart, {
- DxSeries,
- DxCommonSeriesSettings
- } from 'devextreme-vue/chart';
- export default {
- components: {
- DxChart,
- DxSeries,
- DxCommonSeriesSettings
- }
- }
- </script>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.