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.
jQuery
JavaScript
$(function () {
    $("#chartContainer").dxChart({
        series: [{
            type: "spline"
        }, {
            // ...
        }],
        commonSeriesSettings: {
            line: { ... },
            spline: { ... },
            stepline: { ... },
            stackedline: { ... },
            stackedspline: { ... },
            fullstackedline: { ... },
            fullstackedspline: { ... }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxi-series type="spline"></dxi-series>
    <dxi-series ... ></dxi-series>
    ...
    <dxo-common-series-settings>
        <dxo-line ... ></dxo-line>
        <dxo-spline ... ></dxo-spline>
        <dxo-stepline ... ></dxo-stepline>
        <dxo-stackedline ... ></dxo-stackedline>
        <dxo-stackedspline ... ></dxo-stackedspline>
        <dxo-fullstackedline ... ></dxo-fullstackedline>
        <dxo-fullstackedspline ... ></dxo-fullstackedspline>
    </dxo-common-series-settings>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
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>
React
App.js
import React from 'react';
import Chart, {
    Series,
    CommonSeriesSettings
} from 'devextreme-react/chart';

const lineSettings = { ... };
const splineSettings = { ... };
const stepLineSettings = { ... };
const stackedLineSettings = { ... };
const stackedSplineSettings = { ... };
const fullStackedLineSettings = { ... };
const fullStackedSplineSettings = { ... };

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Series type="spline" />
                <Series ... />
                ...
                <CommonSeriesSettings
                    line={lineSettings}
                    spline={splineSettings}
                    stepline={stepLineSettings}
                    stackedline={stackedLineSettings}
                    stackedspline={stackedSplineSettings}
                    fullstackedline={fullStackedLineSettings}
                    fullstackedspline={fullStackedSplineSettings}
                />
            </Chart>
        );
    }
}

export default App;

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