If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React, { useCallback, useState } from 'react';
import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box';
import {
Chart,
Series,
ArgumentAxis,
CommonSeriesSettings,
ICommonSeriesSettingsProps,
Margin,
Export,
Legend,
} from 'devextreme-react/chart';
import { dataSource, seriesTypeLabel } from './data.ts';
const types: (ICommonSeriesSettingsProps['type'])[] = ['splinearea', 'stackedsplinearea', 'fullstackedsplinearea'];
function App() {
const [type, setType] = useState(types[0]);
const handleChange = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
setType(e.value);
}, [setType]);
return (
<div id="chart-demo">
<Chart
palette="Harmony Light"
title="Corporations with Highest Market Value"
dataSource={dataSource}>
<CommonSeriesSettings
argumentField="company"
type={type}
/>
<Series valueField="y2005" name="2005"></Series>
<Series valueField="y2004" name="2004"></Series>
<ArgumentAxis valueMarginsEnabled={false} />
<Legend
verticalAlignment="bottom"
horizontalAlignment="center"
/>
<Margin bottom={20} />
<Export enabled={true} />
</Chart>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<span>Series Type </span>
<SelectBox
dataSource={types}
inputAttr={seriesTypeLabel}
value={type}
onValueChanged={handleChange}
/>
</div>
</div>
</div>
);
}
export default App;
xxxxxxxxxx
import React, { useCallback, useState } from 'react';
import SelectBox from 'devextreme-react/select-box';
import {
Chart,
Series,
ArgumentAxis,
CommonSeriesSettings,
Margin,
Export,
Legend,
} from 'devextreme-react/chart';
import { dataSource, seriesTypeLabel } from './data.js';
const types = ['splinearea', 'stackedsplinearea', 'fullstackedsplinearea'];
function App() {
const [type, setType] = useState(types[0]);
const handleChange = useCallback(
(e) => {
setType(e.value);
},
[setType],
);
return (
<div id="chart-demo">
<Chart
palette="Harmony Light"
title="Corporations with Highest Market Value"
dataSource={dataSource}
>
<CommonSeriesSettings
argumentField="company"
type={type}
/>
<Series
valueField="y2005"
name="2005"
></Series>
<Series
valueField="y2004"
name="2004"
></Series>
<ArgumentAxis valueMarginsEnabled={false} />
<Legend
verticalAlignment="bottom"
horizontalAlignment="center"
/>
<Margin bottom={20} />
<Export enabled={true} />
</Chart>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<span>Series Type </span>
<SelectBox
dataSource={types}
inputAttr={seriesTypeLabel}
value={type}
onValueChanged={handleChange}
/>
</div>
</div>
</div>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
export const dataSource = [{
company: 'ExxonMobil',
y2005: 377.28,
y2004: 270.25,
}, {
company: 'GeneralElectric',
y2005: 353.49,
y2004: 311.43,
}, {
company: 'Microsoft',
y2005: 269.86,
y2004: 273.32,
}, {
company: 'Citigroup',
y2005: 252.95,
y2004: 280.50,
}, {
company: 'Royal Dutch Shell plc',
y2005: 197.67,
y2004: 165.89,
}, {
company: 'Procted & Gamble',
y2005: 184.72,
y2004: 130.52,
}];
export const seriesTypeLabel = { 'aria-label': 'Series Type' };
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
export const dataSource = [
{
company: 'ExxonMobil',
y2005: 377.28,
y2004: 270.25,
},
{
company: 'GeneralElectric',
y2005: 353.49,
y2004: 311.43,
},
{
company: 'Microsoft',
y2005: 269.86,
y2004: 273.32,
},
{
company: 'Citigroup',
y2005: 252.95,
y2004: 280.5,
},
{
company: 'Royal Dutch Shell plc',
y2005: 197.67,
y2004: 165.89,
},
{
company: 'Procted & Gamble',
y2005: 184.72,
y2004: 130.52,
},
];
export const seriesTypeLabel = { 'aria-label': 'Series Type' };
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option > span {
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
-
splinearea
The spline area series draws a line between neighboring data points and fills the area under the line. If the Chart contains multiple area series, they overlap. -
stackedsplinearea
The Chart displays areas stacked on top of each other without overlapping. This type of Chart is useful if you need to compare the contribution of each series to the overall value. -
fullstackedsplinearea
The Chart stacks the areas. Values are displayed as percentages of the total for each argument, as opposed to absolute values. The topmost series points are always plotted at 100%, and the graph completely fills the Chart's pane.
To create multiple spline area series, use the series array to declare each series and the commonSeriesSettings object to specify the common series type.