Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Overview
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.
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"
[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="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) => {
return {
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) => {
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: "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[] {
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://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
System.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@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.4',
'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.9.7/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.5',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.8',
'devextreme-angular': 'npm:devextreme-angular@20.2.4',
'preact': 'npm:preact@10.5.7/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.7/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="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/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.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.10.2/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>