Your search did not match any results.
Area Charts

Spline Area

Spline area series display smooth lines that connect data points. This demo shows different spline area series types. Use the drop-down editor below the Chart to select the type.

  • 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.

www.geohive.com
Backend API
Copy to CodeSandBox
Apply
Reset
<div id="chart-demo"> <dx-chart title="Corporations with Highest Market Value" palette="Harmony Light" [dataSource]="corporationsInfo" > <dxi-series valueField="y2005" name="2005"></dxi-series> <dxi-series valueField="y2004" name="2004"></dxi-series> <dxo-common-series-settings #commonSeries argumentField="company" [type]="types[0]" ></dxo-common-series-settings> <dxo-margin [bottom]="20"></dxo-margin> <dxo-argument-axis [valueMarginsEnabled]="false"></dxo-argument-axis> <dxo-export [enabled]="true"></dxo-export> <dxo-legend verticalAlignment="bottom" horizontalAlignment="center"> </dxo-legend> </dx-chart> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Series Type</span> <dx-select-box [dataSource]="types" [(value)]="commonSeries.type"> </dx-select-box> </div> </div> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxChartModule, DxSelectBoxModule } from 'devextreme-angular'; import { СorporationInfo, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service], preserveWhitespaces: true, }) export class AppComponent { corporationsInfo: СorporationInfo[]; types: string[] = ['splinearea', 'stackedsplinearea', 'fullstackedsplinearea']; constructor(service: Service) { this.corporationsInfo = service.getCorporationsInfo(); } } @NgModule({ imports: [ BrowserModule, DxChartModule, DxSelectBoxModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } ::ng-deep .option { margin-top: 10px; } ::ng-deep .caption { font-size: 18px; font-weight: 500; } ::ng-deep .option > span { margin-right: 10px; } ::ng-deep .option > .dx-widget { display: inline-block; vertical-align: middle; }
import { Injectable } from '@angular/core'; export class СorporationInfo { company: string; y2005: number; y2004: number; } const corporationsInfo: СorporationInfo[] = [{ company: 'ExxonMobil', y2005: 362.53, y2004: 277.02, }, { company: 'GeneralElectric', y2005: 348.45, y2004: 328.54, }, { company: 'Microsoft', y2005: 279.02, y2004: 297.02, }, { company: 'Citigroup', y2005: 230.93, y2004: 255.3, }, { company: 'Royal Dutch Shell plc', y2005: 203.52, y2004: 173.54, }, { company: 'Procted & Gamble', y2005: 197.12, y2004: 131.89, }]; @Injectable() export class Service { getCorporationsInfo(): СorporationInfo[] { return corporationsInfo; } }
// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', '@angular/core': 'npm:@angular/core@12.2.16', '@angular/platform-browser': 'npm:@angular/platform-browser@12.2.16', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.16', '@angular/forms': 'npm:@angular/forms@12.2.16', '@angular/common': 'npm:@angular/common@12.2.16', '@angular/compiler': 'npm:@angular/compiler@12.2.16', 'tslib': 'npm:tslib@2.3.1/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.1.6/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@22.1.6/bundles/dx.all.js', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.18/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.65', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.33', 'devextreme-angular': 'npm:devextreme-angular@22.1.6', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11', 'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.11/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@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js', // Prettier 'prettier/standalone': 'npm:prettier@2.7.1/standalone.js', 'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.11/inferno/package.json', 'npm:@angular/*/package.json', 'npm:@angular/common@12.2.16/*/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devextreme-angular@22.1.6/*/package.json', 'npm:devextreme-angular@22.1.6/ui/*/package.json', 'npm:devextreme-angular@22.1.6/package.json', 'npm:devexpress-diagram@2.1.65/package.json', 'npm:devexpress-gantt@4.1.33/package.json', ], }; System.config(window.config);
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.6/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.11.8/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>