Advanced Pie Chart

<!DOCTYPE html>
<html>

  <head>
    <title>NGX Charts</title>
    <link rel="stylesheet" href="style.css" />
    <base href="" />
    
  <script src="https://npmcdn.com/zone.js@0.8.5/dist/zone.js"></script>
  <script src="https://npmcdn.com/reflect-metadata@0.1.3/Reflect.js"></script>
  <script src="https://npmcdn.com/systemjs@0.19.31/dist/system.js"></script>
  <script src="https://npmcdn.com/typescript@2.1.1/lib/typescript.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('app')
        .catch(console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

body{
  font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
  text-align: center;
  font-style: normal;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 2rem;
  letter-spacing: 0.01rem;
  color: #212121;
  background-color: #f5f5f5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin:20px
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src",
    '@angular/core': 'https://npmcdn.com/@angular/core@4.0.1/bundles/core.umd.js',
    '@angular/compiler': 'https://npmcdn.com/@angular/compiler@4.0.1/bundles/compiler.umd.js',
    '@angular/common': 'https://npmcdn.com/@angular/common@4.0.1/bundles/common.umd.js',
    '@angular/animations/browser': "https://npmcdn.com/@angular/animations@4.0.1/bundles/animations-browser.umd.js",
    '@angular/animations': "https://npmcdn.com/@angular/animations@4.0.1/bundles/animations.umd.js",
    '@angular/platform-browser-dynamic': 'https://npmcdn.com/@angular/platform-browser-dynamic@4.0.1/bundles/platform-browser-dynamic.umd.js',
    '@angular/platform-browser': 'https://npmcdn.com/@angular/platform-browser@4.0.1/bundles/platform-browser.umd.js',
    '@angular/platform-browser-animations': 'https://npmcdn.com/@angular/platform-browser@4.0.1/bundles/platform-browser-animations.umd.js',
    '@angular/forms': 'https://npmcdn.com/@angular/forms@4.0.1/bundles/forms.umd.js',
    '@angular/router': 'https://npmcdn.com/@angular/router@4.0.1/bundles/router.umd.js',
    'rxjs': 'https://npmcdn.com/rxjs@5.0.0',
    'moment': 'https://npmcdn.com/moment',
    'd3-array': 'https://npmcdn.com/d3-array',
    'd3-brush': 'https://npmcdn.com/d3-brush',
    'd3-shape': 'https://npmcdn.com/d3-shape',
    'd3-selection': 'https://npmcdn.com/d3-selection',
    'd3-color': 'https://npmcdn.com/d3-color',
    'd3-drag': 'https://npmcdn.com/d3-drag',
    'd3-transition': 'https://npmcdn.com/d3-transition',
    'd3-format': 'https://npmcdn.com/d3-format',
    'd3-force': 'https://npmcdn.com/d3-force',
    'd3-dispatch': 'https://npmcdn.com/d3-dispatch',
    'd3-path': 'https://npmcdn.com/d3-path',
    'd3-ease': 'https://npmcdn.com/d3-ease',
    'd3-timer': 'https://npmcdn.com/d3-timer',
    'd3-quadtree': 'https://npmcdn.com/d3-quadtree',
    'd3-interpolate': 'https://npmcdn.com/d3-interpolate',
    'd3-scale': 'https://npmcdn.com/d3-scale',
    'd3-time': 'https://npmcdn.com/d3-time',
    'd3-collection': 'https://npmcdn.com/d3-collection',
    'd3-time-format': 'https://npmcdn.com/d3-time-format',
    'd3-hierarchy': 'https://npmcdn.com/d3-hierarchy',
    '@swimlane/ngx-charts': 'https://npmcdn.com/@swimlane/ngx-charts@7'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './bootstrap.ts',
      defaultExtension: 'ts'
    },
    'rxjs': {
      main: './bundles/Rx.js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser-animations';
import {NgxChartsModule} from '@swimlane/ngx-charts';
import {single, multi} from '../data.ts';

@Component({
  selector: 'my-app',
  template: `
    <ngx-charts-advanced-pie-chart
      [view]="view"
      [scheme]="colorScheme"
      [results]="single"
      [gradient]="gradient"
      (select)="onSelect($event)">
    </ngx-charts-advanced-pie-chart>
  `
})
export class App {
  single: any[];
  multi: any[];
  
  view: any[] = [700, 400];

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  constructor() {
    Object.assign(this, {single, multi})   
  }
  
  onSelect(event) {
    console.log(event);
  }
  
}


@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, NgxChartsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

export var single = [
  {
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  },
  {
    "name": "France",
    "value": 7200000
  }
];

export var multi = [
  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "value": 7300000
      },
      {
        "name": "2011",
        "value": 8940000
      }
    ]
  },

  {
    "name": "USA",
    "series": [
      {
        "name": "2010",
        "value": 7870000
      },
      {
        "name": "2011",
        "value": 8270000
      }
    ]
  },

  {
    "name": "France",
    "series": [
      {
        "name": "2010",
        "value": 5000002
      },
      {
        "name": "2011",
        "value": 5800000
      }
    ]
  }
];