Angular Charts - Selection

This demo illustrates the use of the pointClick callback function to implement selection in the Chart component. 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.

Backend API

<dx-chart id="chart" [dataSource]="exportData" [rotated]="true" title="Economy - Export Change" (onPointClick)="pointClick($event)" (onLegendClick)="legendClick($event)" > <dxi-chart-series valueField="year2019" name="2019 - 2020"></dxi-chart-series> <dxi-chart-series valueField="year2020" name="2020 - 2021"></dxi-chart-series> <dxo-chart-common-series-settings argumentField="country" type="bar" hoverMode="allArgumentPoints" selectionMode="allArgumentPoints" > <dxo-chart-label [visible]="true"> <dxo-chart-format type="percent" [precision]="1"> </dxo-chart-format> </dxo-chart-label> </dxo-chart-common-series-settings> <dxi-chart-value-axis> <dxo-chart-label> <dxo-chart-format type="percent" [precision]="1"> </dxo-chart-format> </dxo-chart-label> </dxi-chart-value-axis> <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center"> </dxo-chart-legend> <dxo-chart-export [enabled]="true"></dxo-chart-export> </dx-chart>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart'; import { Service, ExportData } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxChartModule, ], }) export class AppComponent { exportData: ExportData[]; constructor(service: Service) { this.exportData = service.getExportData(); } pointClick(e: DxChartTypes.PointClickEvent) { e.target.select(); } legendClick({ target: series }: DxChartTypes.LegendClickEvent) { series.isVisible() ? series.hide() : series.show(); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #chart { height: 440px; }

import { Injectable } from '@angular/core'; export class ExportData { country: string; year2019: number; year2020: number; } const exportData: ExportData[] = [{ country: 'United Kingdom', year2019: 0.142, year2020: -0.153, }, { country: 'Germany', year2019: 0.109, year2020: -0.120, }, { country: 'United States', year2019: 0.097, year2020: -0.134, }, { country: 'Japan', year2019: 0.106, year2020: -0.111, }, { country: 'France', year2019: 0.113, year2020: -0.162, }, { country: 'Netherlands', year2019: 0.128, year2020: -0.147, }]; @Injectable() export class Service { getExportData(): ExportData[] { return exportData; } }

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>