Your search did not match any results.
Charts

Selection

Documentation
This demo illustrates the use of the pointClick callback function to implement selection in the Chart widget. The selectionMode of the series is set to "allArgumentPoints", which means that when a user selects a point, other points with the same argument also become selected.
www.geohive.com
Copy to Plunker
Apply
Reset
<dx-chart id="chart" [dataSource]="exportData" [rotated]="true" title="Economy - Export Change" (onPointClick)="pointClick($event)" (onLegendClick)="legendClick($event)"> <dxi-series valueField="year2007" name="2007 - 2008"></dxi-series> <dxi-series valueField="year2008" name="2008 - 2009"></dxi-series> <dxo-common-series-settings argumentField="country" type="bar" hoverMode="allArgumentPoints" selectionMode="allArgumentPoints"> <dxo-label [visible]="true"> <dxo-format type="percent" [precision]="1"> </dxo-format> </dxo-label> </dxo-common-series-settings> <dxi-value-axis> <dxo-label> <dxo-format type="percent" [precision]="1"> </dxo-format> </dxo-label> </dxi-value-axis> <dxo-legend verticalAlignment="bottom" horizontalAlignment="center"> </dxo-legend> <dxo-export [enabled]="true"></dxo-export> </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 { Service, ExportData } from './app.service'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { exportData: ExportData[]; constructor(service: Service) { this.exportData = service.getExportData(); } pointClick(e: any) { e.target.select(); } legendClick(e: any) { var series = e.target; if(series.isVisible()) { series.hide(); } else { series.show(); } } } @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 ExportData { country: string; year2007: number; year2008: number; } let exportData: ExportData[] = [{ country: "China", year2007: 0.1732, year2008: -0.1588 }, { country: "Germany", year2007: 0.0964, year2008: -0.2231 }, { country: "United States", year2007: 0.1187, year2008: -0.1878 }, { country: "Japan", year2007: 0.1081, year2008: -0.2614 }, { country: "France", year2007: 0.1014, year2008: -0.2222 }, { country: "Netherlands", year2007: 0.1355, year2008: -0.2015 }]; @Injectable() export class Service { getExportData(): ExportData[] { return exportData; } }
// 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', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme': 'npm:devextreme@17.1', 'jquery': 'npm:jquery@3.1.1/dist/jquery.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>