Vue Chart - Line Series
Line series visualize data as a collection of points connected by a line. This line can be broken, smooth, or step-like, which corresponds to the Line, Spline, and Step Line series types.
Line series also include stacked series types: Stacked Line and Stacked Spline. In such series, the value of each next point is counted off from the previous point with the same argument. As a result, series are put in a stack. Very similar to stacked series are full-stacked series - Full-Stacked Line and Full-Stacked Spline. In these series, the sum of all point values by a given argument is considered 100%, and each individual point value is recalculated to be a share of these 100%.
To specify one or another series type, assign its name to the series[].type property. You can configure:
- Each series individually using the series array;
- All series in the Chart using the commonSeriesSettings object;
- All series of a specific type using objects nested in commonSeriesSettings: line, spline, stepline, etc.
- <template>
- <DxChart ... >
- <DxSeries type="spline"/>
- <DxSeries ... />
- ...
- <DxCommonSeriesSettings
- :line="lineSettings"
- :spline="splineSettings"
- :stepline="stepLineSettings"
- :stackedline="stackedLineSettings"
- :stackedspline="stackedSplineSettings"
- :fullstackedline="fullStackedLineSettings"
- :fullstackedspline="fullStackedSplineSettings"
- />
- </DxChart>
- </template>
- <script>
- import DxChart, {
- DxSeries,
- DxCommonSeriesSettings
- } from 'devextreme-vue/chart';
- export default {
- components: {
- DxChart,
- DxSeries,
- DxCommonSeriesSettings
- },
- data() {
- return {
- lineSettings: { ... },
- splineSettings: { ... },
- stepLineSettings: { ... },
- stackedLineSettings: { ... },
- stackedSplineSettings: { ... },
- fullStackedLineSettings: { ... },
- fullStackedSplineSettings: { ... }
- };
- }
- }
- </script>
Refer to the Series Types section of the API Reference for a full list of properties available to a specific series type.
Line Series Demo Spline Series Demo
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.