DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Area Series

Area series visualize data as an area filled with a color. This area is limited on top by a broken, smooth, or step-like line, which corresponds to the Area, Spline Area, and Step Area series types.

Area series also include stacked series types: Stacked Area and Stacked Spline Area. 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 Area and Full-Stacked Spline Area. 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 option. 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: area, splinearea, steparea, etc.
$(function () {
        series: [{
            type: "area"
        }, {
            // ...
        commonSeriesSettings: {
            area: { ... },
            splinearea: { ... },
            steparea: { ... },
            stackedarea: { ... },
            stackedsplinearea: { ... },
            fullstackedarea: { ... },
            fullstackedsplinearea: { ... }
<dx-chart ... >
    <dxi-series type="area"></dxi-series>
    <dxi-series ... ></dxi-series>
        <dxo-area ... ></dxo-area>
        <dxo-splinearea ... ></dxo-splinearea>
        <dxo-steparea ... ></dxo-steparea>
        <dxo-stackedarea ... ></dxo-stackedarea>
        <dxo-stackedsplinearea ... ></dxo-stackedsplinearea>
        <dxo-fullstackedarea ... ></dxo-fullstackedarea>
        <dxo-fullstackedsplinearea ... ></dxo-fullstackedsplinearea>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    imports: [
        // ...
    // ...

Refer to the Series Types section of the API Reference for a full list of options available to a specific series type.

Area Series Demos

See Also