Overview
DevExtreme Angular Charts is a set of responsive data visualization controls. 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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<dx-chart
id="chart"
[dataSource]="dataSource"
title="Pizza Shop Complaints"
palette="Harmony Light"
>
<dxi-value-axis name="frequency" position="left" [tickInterval]="300">
</dxi-value-axis>
<dxi-value-axis
name="percentage"
position="right"
[showZero]="true"
[tickInterval]="20"
[valueMarginsEnabled]="false"
>
<dxo-label [customizeText]="customizeLabelText"></dxo-label>
<dxi-constant-line
[value]="80"
color="#fc3535"
dashStyle="dash"
[width]="2"
>
<dxo-label [visible]="false"></dxo-label>
</dxi-constant-line>
</dxi-value-axis>
<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="Complaint 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) => ({
html: `<div><div class='tooltip-header'>${
info.argumentText}</div>`
+ '<div class=\'tooltip-body\'><div class=\'series-name\'>'
+ `<span class='top-series-name'>${info.points[0].seriesName}</span>`
+ ': </div><div class=\'value-text\'>'
+ `<span class='top-series-value'>${info.points[0].valueText}</span>`
+ '</div><div class=\'series-name\'>'
+ `<span class='bottom-series-name'>${info.points[1].seriesName}</span>`
+ ': </div><div class=\'value-text\'>'
+ `<span class='bottom-series-value'>${info.points[1].valueText}</span>`
+ '% </div></div></div>',
});
customizeLabelText = (info: any) => `${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;
}
const complaintsData: Complaints[] = [
{ complaint: 'Cold pizza', count: 780 },
{ complaint: 'Not enough cheese', count: 120 },
{ complaint: 'Underbaked or Overbaked', count: 52 },
{ complaint: 'Delayed delivery', count: 1123 },
{ complaint: 'Damaged pizza', count: 321 },
{ complaint: 'Incorrect billing', count: 89 },
{ complaint: 'Wrong size delivered', count: 222 },
];
@Injectable()
export class Service {
getComplaintsData(): ComplaintsWithPercent[] {
const data = complaintsData.sort((a, b) => b.count - a.count);
const totalCount = data.reduce((prevValue, item) => prevValue + item.count, 0);
let cumulativeCount = 0;
return data.map((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://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'@angular/core': 'npm:@angular/core@12.2.16',
'@angular/platform-browser': 'npm:@angular/platform-browser@12.2.16',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.16',
'@angular/forms': 'npm:@angular/forms@12.2.16',
'@angular/common': 'npm:@angular/common@12.2.16',
'@angular/compiler': 'npm:@angular/compiler@12.2.16',
'tslib': 'npm:tslib@2.3.1/tslib.js',
'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',
'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.2.3/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@22.2.3/bundles/dx.all.js',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.18/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.65',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.37',
'devextreme-angular': 'npm:devextreme-angular@22.2.3',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.7.1/standalone.js',
'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.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',
},
'rxjs': {
defaultExtension: 'js',
},
'rxjs/operators': {
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
'npm:@angular/*/package.json',
'npm:@angular/common@12.2.16/*/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devextreme-angular@22.2.3/*/package.json',
'npm:devextreme-angular@22.2.3/ui/*/package.json',
'npm:devextreme-angular@22.2.3/package.json',
'npm:devexpress-diagram@2.1.65/package.json',
'npm:devexpress-gantt@4.1.37/package.json',
],
};
System.config(window.config);
<!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/22.2.3/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.12.0/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.13/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>