Your search did not match any results.
Point Charts

Custom Axis Position

The Chart widget initially displays axes along pane borders. Several other predefined axis layout options are available. In this demo, the customPosition option is used to move each axis, so that it is displayed on the specified value of another axis. When you position the argument axis, use values from the value axis (in the same type and format) and vice versa.

Regardless of which automatic axis layout type you use, the Chart Control allows you to apply manual offsets. Specify the offset option in pixels to keep the axis position unchanged when users scroll or zoom the Chart data. The offset option shifts the axis from the specified position as follows:

  • If the axis is horizontal, a negative offset shifts the axis to the top, a positive offset shifts it to the bottom.

  • If the axis is vertical, a negative offset shifts the axis to the left, a positive offset shifts it to the right.

In this demo, you can use controls under the Chart to change the customPosition and offset options for both axes.

Copy to CodeSandBox
<dx-chart id="chart" [dataSource]="dataSource"> <dxo-common-series-settings type="scatter"></dxo-common-series-settings> <dxi-series argumentField="x1" valueField="y1"></dxi-series> <dxi-series argumentField="x2" valueField="y2"> <dxo-point symbol="triangleDown"></dxo-point> </dxi-series> <dxo-argument-axis #argument [visualRange]="[-20, 20]" [offset]="0" [customPosition]="0"> </dxo-argument-axis> <dxi-value-axis #value [visualRange]="[-20, 20]" [endOnTick]="false" [offset]="0" [customPosition]="0"> </dxi-value-axis> <dxo-legend [visible]="false"></dxo-legend> </dx-chart> <div class="options"> <div class="caption">Options</div> <div class="common"> <div class='block left'> <span>Argument Axis</span> <div class='option'> <span>Custom position:</span> <dx-number-box [value]="0" [showSpinButtons]="true" [(value)]="argument.customPosition"> </dx-number-box> </div> <div class='option'> <span>Offset:</span> <dx-number-box [value]="0" [showSpinButtons]="true" [(value)]="argument.offset"> </dx-number-box> </div> </div> <div class='block right'> <span>Value Axis</span> <div class='option'> <span>Custom position:</span> <dx-number-box [value]="0" [showSpinButtons]="true" [(value)]="value.customPosition"> </dx-number-box> </div> <div class='option'> <span>Offset:</span> <dx-number-box [value]="0" [showSpinButtons]="true" [(value)]="value.offset"> </dx-number-box> </div> </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, DxNumberBoxModule } from 'devextreme-angular'; import { Service, ScatterData } from './app.service'; if(!/localhost/.test( { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], preserveWhitespaces: true }) export class AppComponent { dataSource: ScatterData[]; constructor(service: Service) { this.dataSource = service.generateDataSource(); } } @NgModule({ imports: [ BrowserModule, DxChartModule, DxNumberBoxModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .options { padding: 20px; margin-top: 20px; background-color: rgba(191, 191, 191, 0.15); } ::ng-deep .option { margin-top: 10px; overflow: auto; } ::ng-deep .option > span { margin-right: 20px; margin-top: 6px; float: left; } ::ng-deep .caption { font-size: 18px; font-weight: 700; } ::ng-deep .option > .dx-numberbox { width: 90px; float: right; } ::ng-deep .common { width: 488px; } ::ng-deep .block { vertical-align: middle; margin-top: 10px; } ::ng-deep .left { display: inline-block; } ::ng-deep .right { float: right; } ::ng-deep .block > span { font-size: 18px; font-weight: 500; }
import { Injectable } from '@angular/core'; export class ScatterData { x1: number; y1: number; x2: number; y2: number; } @Injectable() export class Service { random(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } generateDataSource() { let x1, x2, y1, y2, i; const ds = []; for (i = 0; i < 20; i++) { x1 = this.random(5, 15); y1 = this.random(5, 15); ds.push({ x1: x1, y1: y1, x2: x2, y2: y2 }); } for (i = 0; i < 20; i++) { x2 = this.random(5, 15); y2 = this.random(-15, -5); ds.push({ x1: x1, y1: y1, x2: x2, y2: y2 }); } for (i = 0; i < 20; i++) { x2 = this.random(-15, -5); y2 = this.random(5, 15); ds.push({ x1: x1, y1: y1, x2: x2, y2: y2 }); } for (i = 0; i < 20; i++) { x1 = this.random(-15, -5); y1 = this.random(-15, -5); ds.push({ x1: x1, y1: y1, x2: x2, y2: y2 }); } return ds; } }
// 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: // System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, 'devextreme/localization.js': { "esModule": true } }, paths: { 'npm:': '' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.5.3/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib@2.0.3/tslib.js', 'rxjs': 'npm:rxjs@6.3.3', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.3', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.5/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.0', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.0', 'devextreme-angular': 'npm:devextreme-angular@20.2.3', 'preact': 'npm:preact@10.5.5/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.5/hooks/dist/hooks.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' } }, packageConfigPaths: [ "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular/*/package.json", "npm:devextreme-angular/ui/*/package.json", "npm:devextreme-angular/package.json", "npm:devexpress-diagram/package.json", "npm:devexpress-gantt/package.json", ] });
<!DOCTYPE html> <html xmlns=""> <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="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></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>