All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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 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: 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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxSeries type="area"/>
        <DxSeries ... />
        ...
        <DxCommonSeriesSettings
            :area="areaSettings"
            :splinearea="splineAreaSettings"
            :steparea="stepAreaSettings"
            :stackedarea="stackedAreaSettings"
            :stackedsplinearea="stackedSplineAreaSettings"
            :fullstackedarea="fullStackedAreaSettings"
            :fullstackedsplinearea="fullStackedSplineAreaSettings"
        />
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries,
    DxCommonSeriesSettings
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries,
        DxCommonSeriesSettings
    },
    data() {
        return {
            areaSettings: { ... },
            splineAreaSettings: { ... },
            stepAreaSettings: { ... },
            stackedAreaSettings: { ... },
            stackedSplineAreaSettings: { ... },
            fullStackedAreaSettings: { ... },
            fullStackedSplineAreaSettings: { ... }
        };
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    Series,
    CommonSeriesSettings
} from 'devextreme-react/chart';

const areaSettings = { ... };
const splineAreaSettings = { ... };
const stepAreaSettings = { ... };
const stackedAreaSettings = { ... };
const stackedSplineAreaSettings = { ... };
const fullStackedAreaSettings = { ... };
const fullStackedSplineAreaSettings = { ... };

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Series type="area" />
                <Series ... />
                ...
                <CommonSeriesSettings
                    area={areaSettings}
                    splinearea={splineAreaSettings}
                    steparea={stepAreaSettings}
                    stackedarea={stackedAreaSettings}
                    stackedsplinearea={stackedSplineAreaSettings}
                    fullstackedarea={fullStackedAreaSettings}
                    fullstackedsplinearea={fullStackedSplineAreaSettings}
                />
            </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.

Area Series Demo

See Also