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.
App.vue
  • <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