JavaScript/jQuery Chart - 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
$(function () {
$("#chartContainer").dxChart({
series: [{
type: "area"
}, {
// ...
}],
commonSeriesSettings: {
area: { ... },
splinearea: { ... },
steparea: { ... },
stackedarea: { ... },
stackedsplinearea: { ... },
fullstackedarea: { ... },
fullstackedsplinearea: { ... }
}
});
});Angular
<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
<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
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.