Your search did not match any results.

DevExtreme HTML5 JavaScript Charting library is a set of responsive data visualization controls available as Angular components. With the vast assortment of charts including bars, areas, lines, bubbles, funnels and pyramids, DevExtreme Charting library will satisfy the most demanding customers. It supports native Angular features as well: AOT compilation, declarative configuration, TypeScript compile-time checking, and more.

Copy to CodeSandBox
Apply
Reset
<dx-chart id="chart" [dataSource]="dataSource" title="Pizza Shop Complaints" palette="Harmony Light" [valueAxis]="[{ name: 'frequency', position: 'left', tickInterval: 300 }, { name: 'percentage', position: 'right', showZero: true, label: { customizeText: customizeLabelText }, constantLines: [{ value: 80, color: '#fc3535', dashStyle: 'dash', width: 2, label: { visible: false } }], tickInterval: 20, valueMarginsEnabled: false }]"> <dxo-argument-axis> <dxo-label overlappingBehavior="stagger"></dxo-label> </dxo-argument-axis> <dxo-tooltip [enabled]="true" [shared]="true" [customizeTooltip]="customizeTooltip"> </dxo-tooltip> <dxo-common-series-settings argumentField="complaint"> </dxo-common-series-settings> <dxi-series type="bar" valueField="count" axis="frequency" name="Complaints frequency" color="#fac29a"> </dxi-series> <dxi-series type="spline" valueField="cumulativePercent" axis="percentage" name="Cumulative percentage" color="#6b71c3"> </dxi-series> <dxo-legend verticalAlignment="top" horizontalAlignment="center"> </dxo-legend> </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, ComplaintsWithPercent } 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 { dataSource: ComplaintsWithPercent[]; constructor(service: Service) { this.dataSource = service.getComplaintsData() } customizeTooltip = (info: any) => { return { html: "<div><div class='tooltip-header'>" + info.argumentText + "</div>" + "<div class='tooltip-body'><div class='series-name'>" + info.points[0].seriesName + ": </div><div class='value-text'>" + info.points[0].valueText + "</div><div class='series-name'>" + info.points[1].seriesName + ": </div><div class='value-text'>" + info.points[1].valueText + "% </div></div></div>" }; } customizeLabelText = (info: any) => { return info.valueText + "%"; } } @NgModule({ imports: [ BrowserModule, DxChartModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #chart { height: 440px; } ::ng-deep .tooltip-header { margin-bottom: 5px; font-size: 16px; font-weight: 500; padding-bottom: 5px; border-bottom: 1px solid #c5c5c5; } ::ng-deep .tooltip-body { width: 170px; } ::ng-deep .tooltip-body .series-name { font-weight: normal; opacity: 0.6; display: inline-block; line-height: 1.5; padding-right: 10px; width: 126px; } ::ng-deep .tooltip-body .value-text { display: inline-block; line-height: 1.5; width: 30px; }
import { Injectable } from '@angular/core'; class Complaints { complaint: string; count: number } export class ComplaintsWithPercent { complaint: string; count: number; cumulativePercent: number; } let complaintsData: Complaints[] = [{ complaint: "Pizza is cold", count: 780 }, { complaint: "Inadequate cheese quantity", count: 120 }, { complaint: "Not baked properly", count: 52 }, { complaint: "Delayed delivery", count: 1123 }, { complaint: "Damaged delivery", count: 321 }, { complaint: "Incorrect billing", count: 89 }, { complaint: "Wrong size delivered", count: 222 }]; @Injectable() export class Service { getComplaintsData(): ComplaintsWithPercent[] { var data = complaintsData.sort(function (a, b) { return b.count - a.count; }), totalCount = data.reduce(function (prevValue, item) { return prevValue + item.count; }, 0), cumulativeCount = 0; return data.map(function (item, index) { cumulativeCount += item.count; return { complaint: item.complaint, count: item.count, cumulativePercent: Math.round(cumulativeCount * 100 / totalCount) }; }); } }
// 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.0.6/lib/typescript.js', '@angular/core': 'npm:@angular/core@5.1.2/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@5.1.2/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@5.1.2/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@5.1.2/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@5.1.2/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@5.1.2/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@5.1.2/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@5.1.2/bundles/forms.umd.js', '@angular/common/http': 'npm:@angular/common@5.1.2/bundles/common-http.umd.js', 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs@5.0.3', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme': 'npm:devextreme@18.1', 'devextreme-angular': 'npm:devextreme-angular@18.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/18.1.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.1.4/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>