All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - 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.
jQuery
JavaScript
$(function () {
    $("#chartContainer").dxChart({
        series: [{
            type: "area"
        }, {
            // ...
        }],
        commonSeriesSettings: {
            area: { ... },
            splinearea: { ... },
            steparea: { ... },
            stackedarea: { ... },
            stackedsplinearea: { ... },
            fullstackedarea: { ... },
            fullstackedsplinearea: { ... }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxi-series type="area"></dxi-series>
    <dxi-series ... ></dxi-series>
    ...
    <dxo-common-series-settings>
        <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>
    </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 options available to a specific series type.

Area Series Demos

See Also