<dx-pie-chart
id="pie"
palette="Vintage"
[dataSource]="champions">
<dxo-common-annotation-settings
type="image"
color="transparent"
[paddingLeftRight]="0"
[paddingTopBottom]="0"
tooltipTemplate="tooltipTemplate"
>
<dxo-image
[height]="60"
[width]="90"
></dxo-image>
<dxo-border color="transparent"></dxo-border>
</dxo-common-annotation-settings>
<dxi-annotation
*ngFor="let item of annotations"
[argument]="item.country"
[data]="item.data"
[location]="item.location"
[offsetX]="item.offsetX"
[offsetY]="item.offsetY"
[color]="item.color">
<dxo-image [url]="item.image"></dxo-image>
<dxo-border [color]="item.borderColor"></dxo-border>
<dxo-shadow [opacity]="item.shadowOpacity"></dxo-shadow>
</dxi-annotation>
<dxi-series
argumentField="country"
valueField="gold">
<dxo-label
[visible]="true"
position="inside"
[radialOffset]="83"
backgroundColor="transparent">
<dxo-font
[size]="16"
[weight]="600"
></dxo-font>
</dxo-label>
</dxi-series>
<dxo-tooltip
[paddingLeftRight]="12"
[paddingTopBottom]="10"
></dxo-tooltip>
<dxo-legend [visible]="false"></dxo-legend>
<dxo-title text="Ice Hockey World Championship Gold Medal Winners"></dxo-title>
<div *dxTemplate="let annotation of 'tooltipTemplate'" class='medal-tooltip'>
<div class='country-name'>{{annotation.data.country}}
<br *ngIf="annotation.data.oldCountryName"/>{{annotation.data.oldCountryName}}
</div>
<div class='gold'>
<span class='caption'>Gold</span>: {{annotation.data.gold}}
</div>
<div class='silver'>
<span class='caption'>Silver</span>: {{annotation.data.silver}}
</div>
<div class='bronze'>
<span class='caption'>Bronze</span>: {{annotation.data.bronze}}
</div>
</div>
</dx-pie-chart>
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxPieChartModule } from 'devextreme-angular';
import { MedalistData, AnnotationInfo, Service } from './app.service';
if(!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
providers: [Service]
})
export class AppComponent {
champions: MedalistData[];
annotations: AnnotationInfo[];
constructor(service: Service) {
this.champions = service.getChampionsData();
this.annotations = service.getAnnotationSources();
}
}
@NgModule({
imports: [
BrowserModule,
DxPieChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #pie {
height: 440px;
}
::ng-deep .medal-tooltip {
font-size: 12px;
}
::ng-deep .medal-tooltip .country-name {
font-size: 14px;
font-weight: 700;
margin: 5px 0px 10px 0px;
}
::ng-deep .medal-tooltip .caption {
font-weight: 600;
}
import {
Injectable
} from '@angular/core';
export class MedalistData {
country?: string;
oldCountryName?: string;
gold?: number;
silver?: number;
bronze?: number;
}
export class AnnotationInfo {
country: string;
data?: MedalistData;
image?: string;
location?: string;
offsetX?: number;
offsetY?: number;
color?: string;
borderColor?: string;
shadowOpacity?: number
}
let champions: MedalistData[] = [{
country: "Russia",
oldCountryName: "Soviet Union",
gold: 27,
silver: 10,
bronze: 10
}, {
country: "Canada",
gold: 26,
silver: 15,
bronze: 9
}, {
country: "Czech Republic",
oldCountryName: "Czechoslovakia",
gold: 12,
silver: 13,
bronze: 21
}, {
country: "Sweden",
gold: 11,
silver: 19,
bronze: 17
}, {
country: "Finland",
gold: 3,
silver: 8,
bronze: 3
}, {
country: "United States",
gold: 2,
silver: 9,
bronze: 8
}, {
country: "Great Britain",
gold: 1,
silver: 2,
bronze: 2
}, {
country: "Slovakia",
gold: 1,
silver: 2,
bronze: 1
}];
let annotationSources: AnnotationInfo[] = [{
country: "Russia",
offsetX: 15,
offsetY: 5
}, {
country: "Canada",
offsetY: 10
}, {
country: "Czech Republic",
offsetX: -5,
offsetY: -35
}, {
country: "Sweden",
offsetX: 20,
offsetY: -25
}, {
country: "Finland",
location: "edge",
offsetX: 45,
offsetY: -85,
}, {
country: "United States",
location: "edge",
offsetX: 85,
offsetY: -45,
}, {
country: "Great Britain",
location: "edge",
offsetX: 81,
offsetY: 15
}, {
country: "Slovakia",
location: "edge",
offsetX: 45,
offsetY: 80
}];
const edgeAnnotationSettings = {
color: "#aaaaaa",
borderColor: "#aaaaaa",
shadowOpacity: 0.3
};
@Injectable()
export class Service {
getChampionsData(): MedalistData[] {
return champions;
}
getAnnotationSources(): AnnotationInfo[] {
const annotations: AnnotationInfo[] = [];
for(let i = 0; i < annotationSources.length; i++) {
let annotation = annotationSources[i];
const country = annotation.country;
const image = `../../../../images/flags/3x2/${country.replace(/\s/, "")}.svg`;
const data = { ...champions.filter(d => (d.country === country))[0] };
annotations.push({
...annotation,
image,
data,
...(annotation.location === "edge" ? edgeAnnotationSettings : {})
});
}
return annotations;
}
}
// 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.1.0/tslib.js',
'rxjs': 'npm:rxjs@6.4.0',
'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.5',
'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.11',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.18',
'devextreme-angular': 'npm:devextreme-angular@20.2.5',
'preact': 'npm:preact@10.5.11/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.11/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.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/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>