Stacked Bar
Documentation
This demo illustrates the use of the stacked bar series type. Unlike side-by-side bar charts, this series is able to present both the proportion and the total value for each data category using rectangular bars stacked on top of one another.
www.geohive.com
Thank you!
We appreciate your feedback.
We appreciate your feedback.
jQuery
AngularJS
Angular
Vue
React
ASP.NET MVC
ASP.NET Core
<dx-chart
id="chart"
title="Male Age Structure"
[dataSource]="dataSource">
<dxi-series valueField="young" name="0-14"></dxi-series>
<dxi-series valueField="middle" name="15-64"></dxi-series>
<dxi-series valueField="older" name="65 and older"></dxi-series>
<dxi-value-axis position="right">
<dxo-title text="millions"></dxo-title>
</dxi-value-axis>
<dxo-common-series-settings
argumentField="state"
type="stackedBar">
</dxo-common-series-settings>
<dxo-legend
verticalAlignment="bottom"
horizontalAlignment="center"
itemTextPosition="top">
</dxo-legend>
<dxo-export [enabled]="true"></dxo-export>
<dxo-tooltip
[enabled]="true"
location="edge"
[customizeTooltip]="customizeTooltip">
</dxo-tooltip>
</dx-chart>
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxChartModule } from 'devextreme-angular';
import { MaleAgeStructure, 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]
})
export class AppComponent {
dataSource: MaleAgeStructure[];
constructor(service: Service) {
this.dataSource = service.getMaleAgeData();
}
customizeTooltip(arg: any) {
return {
text: arg.seriesName + ' years: ' + arg.valueText
};
}
}
@NgModule({
imports: [
BrowserModule,
DxChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #chart {
height: 440px;
}
import { Injectable } from '@angular/core';
export class MaleAgeStructure {
state: string;
young: number;
middle: number;
older: number;
}
let maleAgeData: MaleAgeStructure[] = [{
state: "Germany",
young: 6.7,
middle: 28.6,
older: 5.1
}, {
state: "Japan",
young: 9.6,
middle: 43.4,
older: 9
}, {
state: "Russia",
young: 13.5,
middle: 49,
older: 5.8
}, {
state: "USA",
young: 30,
middle: 90.3,
older: 14.5
}];
@Injectable()
export class Service {
getMaleAgeData(): MaleAgeStructure[] {
return maleAgeData;
}
}
// 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://github.com/DevExpress/devextreme-angular/blob/master/README.md
System.config({
transpiler: 'ts',
typescriptOptions: {
module: "commonjs",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js',
'typescript': 'npm:typescript@2.2.2/lib/typescript.js',
'@angular/core': 'npm:@angular/core@7.1.3/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@7.1.3/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@7.1.3/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@7.1.3/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@7.1.3/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'npm:@angular/router@7.1.3/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@7.1.3/bundles/forms.umd.js',
'@angular/common/http': 'npm:@angular/common@7.1.3/bundles/common-http.umd.js',
'tslib': 'npm:tslib/tslib.js',
'rxjs': 'npm:rxjs@6.3.3',
'rxjs/operators': 'npm:rxjs@6.3.3/operators',
'devextreme': 'npm:devextreme@18.2',
'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.6/dist/quill.js',
'devextreme-angular': 'npm:devextreme-angular@18.2'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'rxjs': { main: 'index.js', defaultExtension: 'js' },
'rxjs/operators': { main: 'index.js', defaultExtension: 'js' },
'devextreme-angular': {
main: 'index.js',
defaultExtension: 'js'
}
}
});
<!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/18.2.7/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/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>