Angular 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.
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
  • ],
  • // ...
  • })

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