Your search did not match any results.
Bar Charts

Custom Bar Width

Documentation
This demo illustrates how to customize bar width to meet specific app requirements.
www.geohive.com
Copy to Plunker
Apply
Reset
<dx-chart id="chart" [dataSource]="oilProductionData" palette="soft" [barWidth]="0.5"> <dxi-series valueField="year1970" name="1970"></dxi-series> <dxi-series valueField="year1980" name="1980"></dxi-series> <dxi-series valueField="year1990" name="1990"></dxi-series> <dxi-series valueField="year2000" name="2000"></dxi-series> <dxi-series valueField="year2008" name="2008"></dxi-series> <dxi-series valueField="year2009" name="2009"></dxi-series> <dxo-common-series-settings argumentField="state" type="bar"> </dxo-common-series-settings> <dxo-legend verticalAlignment="bottom" horizontalAlignment="center"> </dxo-legend> <dxo-export [enabled]="true"></dxo-export> <dxo-title text="Oil Production"> <dxo-subtitle text="(in millions tonnes)"></dxo-subtitle> </dxo-title> </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 { OilProduction, 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 { oilProductionData: OilProduction[]; constructor(service: Service) { this.oilProductionData = service.getOilProductionData(); } } @NgModule({ imports: [ BrowserModule, DxChartModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
/deep/ #chart { height: 440px; }
import { Injectable } from '@angular/core'; export class OilProduction { state: string; year1970: number; year1980: number; year1990: number; year2000: number; year2008: number; year2009: number; } let oilProductionData: OilProduction[] = [{ state: "Saudi Arabia", year1970: 192.2, year1980: 509.8, year1990: 342.6, year2000: 456.3, year2008: 515.3, year2009: 459.5 }, { state: "USA", year1970: 533.5, year1980: 480.2, year1990: 416.6, year2000: 352.6, year2008: 304.9, year2009: 325.3 }, { state: "China", year1970: 30.7, year1980: 106, year1990: 138.3, year2000: 162.6, year2008: 195.1, year2009: 189 }, { state: "Canada", year1970: 70.1, year1980: 83.3, year1990: 92.6, year2000: 126.9, year2008: 157.7, year2009: 155.7 }, { state: "Mexico", year1970: 24.2, year1980: 107.2, year1990: 146.3, year2000: 171.2, year2008: 157.7, year2009: 147.5 }]; @Injectable() export class Service { getOilProductionData(): OilProduction[] { return oilProductionData; } }
// 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@4.1.0/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@4.1.0/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@4.1.0/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@4.1.0/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.1.0/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@4.1.0/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@4.1.0/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@4.1.0/bundles/forms.umd.js', 'rxjs': 'npm:rxjs@5.3.1', 'devextreme': 'npm:devextreme@17.1', 'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme-angular': 'npm:devextreme-angular@17.1' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { 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/17.1.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.6/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.19.31/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>