feat(charts): add the charts demos

src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts

@@ -2,7 +2,76 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-chartjs-bar-horizontal',
-  template: ``,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  template: `
+    <canvas baseChart
+            [datasets]="chartData"
+            [labels]="chartLabels"
+            [options]="chartOptions"
+            [legend]="chartLegend"
+            [chartType]="chartType"></canvas>
+  `,
 })
 export class ChartjsBarHorizontalComponent {
+  chartData = [
+    {
+      label: 'Dataset 1',
+      backgroundColor: 'red',
+      borderColor: 'red',
+      borderWidth: 1,
+      data: [
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+      ],
+    },
+    {
+      label: 'Dataset 2',
+      backgroundColor: 'blue',
+      borderColor: 'blue',
+      data: [
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+      ],
+    },
+  ];
+  chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+  chartOptions = {
+    // Elements options apply to all of the options unless overridden in a dataset
+    // In this case, we are setting the border of each horizontal bar to be 2px wide
+    elements: {
+      rectangle: {
+        borderWidth: 2,
+      },
+    },
+    responsive: true,
+    legend: {
+      position: 'right',
+    },
+    title: {
+      display: true,
+      text: 'Chart.js Horizontal Bar Chart',
+    },
+  };
+  chartLegend: boolean = true;
+  chartType: string = 'horizontalBar';
+
+  private randomScalingFactor() {
+    return Math.round(Math.random() * 100);
+  }
 }

src/app/pages/charts/chartjs/chartjs-bar.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'ngx-chart-js-bar',
+  selector: 'ngx-chartjs-bar',
   styles: [
     `
       :host {
@@ -11,16 +11,15 @@ import { Component } from '@angular/core';
   ],
   template: `
     <canvas baseChart
-          [datasets]="barChartData"
+          [datasets]="chartData"
-          [labels]="barChartLabels"
+          [labels]="chartLabels"
-          [options]="barChartOptions"
+          [options]="chartOptions"
-          [legend]="barChartLegend"
+          [legend]="chartLegend"
-          [chartType]="barChartType"></canvas>
+          [chartType]="chartType"></canvas>
   `,
 })
 export class ChartjsBarComponent {
-
+  chartOptions: any = {
-  barChartOptions: any = {
     scaleShowVerticalLines: false,
     responsive: true,
     legend: {
@@ -29,7 +28,8 @@ export class ChartjsBarComponent {
       },
     },
     scales: {
-      xAxes: [{
+      xAxes: [
+        {
           gridLines: {
             display: true,
             color: 'rgba(148,159,177,1)',
@@ -37,8 +37,10 @@ export class ChartjsBarComponent {
           ticks: {
             fontColor: 'white',
           },
-      }],
+        },
-      yAxes: [{
+      ],
+      yAxes: [
+        {
           gridLines: {
             display: true,
             color: 'rgba(148,159,177,1)',
@@ -46,19 +48,15 @@ export class ChartjsBarComponent {
           ticks: {
             fontColor: 'white',
           },
-      }],
+        },
+      ],
     },
   };
-
+  chartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
-  barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
+  chartType: string = 'bar';
-
+  chartLegend: boolean = true;
-  barChartType: string = 'bar';
+  chartData: any[] = [
-
-  barChartLegend: boolean = true;
-
-  barChartData: any[] = [
     { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
     { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
   ];
-
 }

src/app/pages/charts/chartjs/chartjs-line.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'ngx-chart-js-line',
+  selector: 'ngx-chartjs-line',
   styles: [
     `
       :host {
@@ -11,27 +11,26 @@ import { Component } from '@angular/core';
   ],
   template: `
     <canvas baseChart
-            [datasets]="lineChartData"
+            [datasets]="chartData"
-            [labels]="lineChartLabels"
+            [labels]="chartLabels"
-            [options]="lineChartOptions"
+            [options]="chartOptions"
-            [legend]="lineChartLegend"
+            [legend]="chartLegend"
-            [chartType]="lineChartType"></canvas>
+            [chartType]="chatyType"></canvas>
   `,
 })
 export class ChartjsLineComponent {
-
+  chartData: any[] = [
-  lineChartData: any[] = [
     { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
     { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
     { data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C' },
   ];
 
-  lineChartLabels: any[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+  chartLabels: any[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-
+  chartOptions: any = {
-  lineChartOptions: any = {
     responsive: true,
     scales: {
-      xAxes: [{
+      xAxes: [
+        {
           gridLines: {
             display: true,
             color: 'rgba(148,159,177,1)',
@@ -39,8 +38,10 @@ export class ChartjsLineComponent {
           ticks: {
             fontColor: 'white',
           },
-      }],
+        },
-      yAxes: [{
+      ],
+      yAxes: [
+        {
           gridLines: {
             display: true,
             color: 'rgba(148,159,177,1)',
@@ -48,7 +49,8 @@ export class ChartjsLineComponent {
           ticks: {
             fontColor: 'white',
           },
-      }],
+        },
+      ],
     },
     legend: {
       labels: {
@@ -56,9 +58,6 @@ export class ChartjsLineComponent {
       },
     },
   };
-
+  chartLegend: boolean = true;
-  lineChartLegend: boolean = true;
+  chatyType: string = 'line';
-
-  lineChartType: string = 'line';
-
 }

src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts

@@ -2,7 +2,130 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-chartjs-multiple-xaxis',
-  template: ``,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  template: `
+    <canvas baseChart
+            [datasets]="chartData"
+            [labels]="chartLabels"
+            [options]="chartOptions"
+            [legend]="chartLegend"
+            [chartType]="chartType"></canvas>
+  `,
 })
 export class ChartjsMultipleXaxisComponent {
+  chartType: string = 'line';
+  chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+  chartOptions: {
+    responsive: true;
+    legend: {
+      position: 'bottom';
+    };
+    hover: {
+      mode: 'index';
+    };
+    scales: {
+      xAxes: [
+        {
+          display: true;
+          scaleLabel: {
+            display: true;
+            labelString: 'Month';
+          };
+        }
+      ];
+      yAxes: [
+        {
+          display: true;
+          scaleLabel: {
+            display: true;
+            labelString: 'Value';
+          };
+        }
+      ];
+    };
+    title: {
+      display: true;
+      text: 'Chart.js Line Chart - Different point sizes';
+    };
+  };
+  chartLegend: boolean = true;
+  chartData: any[] = [
+    {
+      label: 'dataset - big points',
+      data: [
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+      ],
+      backgroundColor: 'red',
+      borderColor: 'red',
+      fill: false,
+      borderDash: [5, 5],
+      pointRadius: 15,
+      pointHoverRadius: 10,
+    },
+    {
+      label: 'dataset - individual point sizes',
+      data: [
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+      ],
+      backgroundColor: 'blue',
+      borderColor: 'blue',
+      fill: false,
+      borderDash: [5, 5],
+      pointRadius: [2, 4, 6, 18, 0, 12, 20],
+    },
+    {
+      label: 'dataset - large pointHoverRadius',
+      data: [
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+      ],
+      backgroundColor: 'green',
+      borderColor: 'green',
+      fill: false,
+      pointHoverRadius: 30,
+    },
+    {
+      label: 'dataset - large pointHitRadius',
+      data: [
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+        this.randomScalingFactor(),
+      ],
+      backgroundColor: 'yellow',
+      borderColor: 'yellow',
+      fill: false,
+      pointHitRadius: 20,
+    },
+  ];
+
+  private randomScalingFactor() {
+    return Math.round(Math.random() * 100);
+  }
 }

src/app/pages/charts/chartjs/chartjs-pie.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'ngx-chart-js-pie',
+  selector: 'ngx-chartjs-pie',
   styles: [
     `
       :host {
@@ -10,22 +10,22 @@ import { Component } from '@angular/core';
     `,
   ],
   template: `
-    <canvas baseChart
+    <canvas baseChart width="400" height="400"
-            [data]="pieChartData"
+            [data]="chartData"
-            [labels]="pieChartLabels"
+            [labels]="chartLabels"
-            [options]="pieChartOptions"
+            [options]="chartOptions"
-            [chartType]="pieChartType"></canvas>
+            [chartType]="chartType"></canvas>
   `,
 })
 export class ChartjsPieComponent {
-
+  chartType: string = 'pie';
-  pieChartType: string = 'pie';
+  chartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
-  pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
+  chartData: number[] = [300, 500, 100];
-  pieChartData: number[] = [300, 500, 100];
+  chartOptions: any = {
-  pieChartOptions: any = {
     responsive: true,
     scales: {
-      xAxes: [{
+      xAxes: [
+        {
           gridLines: {
             display: true,
             color: 'rgba(148,159,177,1)',
@@ -33,8 +33,10 @@ export class ChartjsPieComponent {
           ticks: {
             fontColor: 'white',
           },
-      }],
+        },
-      yAxes: [{
+      ],
+      yAxes: [
+        {
           gridLines: {
             display: true,
             color: 'rgba(148,159,177,1)',
@@ -42,7 +44,8 @@ export class ChartjsPieComponent {
           ticks: {
             fontColor: 'white',
           },
-      }],
+        },
+      ],
     },
     legend: {
       labels: {
@@ -50,5 +53,4 @@ export class ChartjsPieComponent {
       },
     },
   };
-
 }

src/app/pages/charts/chartjs/chartjs-radar.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-chartjs-radar',
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  template: `
+    <canvas baseChart
+        [datasets]="chartData"
+        [labels]="chartLabels"
+        [chartType]="chartType"></canvas>
+  `,
+})
+export class ChartjsRadarComponent {
+  chartLabels: string[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
+  chartData: any = [
+    { data: [65, 59, 90, 81, 56, 55, 40], label: 'Series A' },
+    { data: [28, 48, 40, 19, 96, 27, 100], label: 'Series B' },
+  ];
+  chartType: string = 'radar';
+}

src/app/pages/charts/chartjs/chartjs.component.html

@@ -3,7 +3,7 @@
     <nga-card size="large">
       <nga-card-header>Pie</nga-card-header>
       <nga-card-body>
-        <ngx-chart-js-pie></ngx-chart-js-pie>
+        <ngx-chartjs-pie></ngx-chartjs-pie>
       </nga-card-body>
     </nga-card>
   </div>
@@ -11,7 +11,7 @@
     <nga-card size="large">
       <nga-card-header>Bar</nga-card-header>
       <nga-card-body>
-        <ngx-chart-js-bar></ngx-chart-js-bar>
+        <ngx-chartjs-bar></ngx-chartjs-bar>
       </nga-card-body>
     </nga-card>
   </div>
@@ -19,7 +19,7 @@
     <nga-card size="large">
       <nga-card-header>Line</nga-card-header>
       <nga-card-body>
-        <ngx-chart-js-line></ngx-chart-js-line>
+        <ngx-chartjs-line></ngx-chartjs-line>
       </nga-card-body>
     </nga-card>
   </div>
@@ -27,6 +27,7 @@
     <nga-card size="large">
       <nga-card-header>Multiple x-axis</nga-card-header>
       <nga-card-body>
+        <ngx-chartjs-multiple-xaxis></ngx-chartjs-multiple-xaxis>
       </nga-card-body>
     </nga-card>
   </div>
@@ -34,6 +35,15 @@
     <nga-card size="large">
       <nga-card-header>Bar Horizontal</nga-card-header>
       <nga-card-body>
+        <ngx-chartjs-bar-horizontal></ngx-chartjs-bar-horizontal>
+      </nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-lg-6">
+    <nga-card size="large">
+      <nga-card-header>Radar</nga-card-header>
+      <nga-card-body>
+        <ngx-chartjs-radar></ngx-chartjs-radar>
       </nga-card-body>
     </nga-card>
   </div>

src/app/pages/charts/chartjs/chartjs.component.ts

@@ -4,6 +4,4 @@ import { Component } from '@angular/core';
   selector: 'ngx-chartjs',
   templateUrl: './chartjs.component.html',
 })
-
+export class ChartjsComponent {}
-export class ChartjsComponent {
-}

src/app/pages/charts/charts.module.ts

@@ -10,12 +10,13 @@ import { ChartjsLineComponent } from './chartjs/chartjs-line.component';
 import { ChartjsPieComponent } from './chartjs/chartjs-pie.component';
 import { ChartjsMultipleXaxisComponent } from './chartjs/chartjs-multiple-xaxis.component';
 import { ChartjsBarHorizontalComponent } from './chartjs/chartjs-bar-horizontal.component';
+import { ChartjsRadarComponent } from './chartjs/chartjs-radar.component';
 import { D3BarComponent } from './d3/d3-bar.component';
 import { D3LineComponent } from './d3/d3-line.component';
 import { D3PieComponent } from './d3/d3-pie.component';
-import { D3PlotComponent } from './d3/d3-plot.component';
 import { D3AreaStackComponent } from './d3/d3-area-stack.component';
 import { D3PolarComponent } from './d3/d3-polar.component';
+import { D3AdvancedPieComponent } from './d3/d3-advanced-pie.component';
 import { EchartsLineComponent } from './echarts/echarts-line.component';
 import { EchartsPieComponent } from './echarts/echarts-pie.component';
 import { EchartsBarComponent } from './echarts/echarts-bar.component';
@@ -30,12 +31,13 @@ const components = [
   ChartjsPieComponent,
   ChartjsMultipleXaxisComponent,
   ChartjsBarHorizontalComponent,
+  ChartjsRadarComponent,
   D3BarComponent,
   D3LineComponent,
   D3PieComponent,
-  D3PlotComponent,
   D3AreaStackComponent,
   D3PolarComponent,
+  D3AdvancedPieComponent,
   EchartsLineComponent,
   EchartsPieComponent,
   EchartsBarComponent,
@@ -46,16 +48,7 @@ const components = [
 ];
 
 @NgModule({
-  imports: [
+  imports: [SharedModule, ChartsRoutingModule, AngularEchartsModule, NgxChartsModule, Ng2Charts],
-    SharedModule,
+  declarations: [...routedComponents, ...components],
-    ChartsRoutingModule,
-    AngularEchartsModule,
-    NgxChartsModule,
-    Ng2Charts,
-  ],
-  declarations: [
-    ...routedComponents,
-    ...components,
-  ],
 })
-export class ChartsModule { }
+export class ChartsModule {}

src/app/pages/charts/d3/d3-advanced-pie.component.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-d3-advanced-pie',
+  template: `
+    <ngx-charts-advanced-pie-chart
+      [view]="view"
+      [scheme]="colorScheme"
+      [results]="single">
+    </ngx-charts-advanced-pie-chart>
+  `,
+})
+export class D3AdvancedPieComponent {
+  single = [
+    {
+      name: 'Germany',
+      value: 8940000,
+    },
+    {
+      name: 'USA',
+      value: 5000000,
+    },
+    {
+      name: 'France',
+      value: 7200000,
+    },
+  ];
+  view: any[] = [700, 400];
+  colorScheme = {
+    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
+  };
+}

src/app/pages/charts/d3/d3-area-stack.component.ts

@@ -2,7 +2,76 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-d3-area-stack',
-  template: ``,
+  template: `
+    <ngx-charts-area-chart
+      [view]="view"
+      [scheme]="colorScheme"
+      [results]="multi"
+      [xAxis]="showXAxis"
+      [yAxis]="showYAxis"
+      [legend]="showLegend"
+      [showXAxisLabel]="showXAxisLabel"
+      [showYAxisLabel]="showYAxisLabel"
+      [xAxisLabel]="xAxisLabel"
+      [yAxisLabel]="yAxisLabel"
+      [autoScale]="autoScale">
+    </ngx-charts-area-chart>
+  `,
 })
 export class D3AreaStackComponent {
+  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,
+        },
+      ],
+    },
+  ];
+  view: any[] = [700, 400];
+  showLegend = true;
+  colorScheme = {
+    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
+  };
+  autoScale = true;
+  showXAxis = true;
+  showYAxis = true;
+  showXAxisLabel = true;
+  showYAxisLabel = true;
+  xAxisLabel = 'Country';
+  yAxisLabel = 'Population';
 }

src/app/pages/charts/d3/d3-bar.component.ts

@@ -18,38 +18,30 @@ import { Component } from '@angular/core';
   `,
 })
 export class D3BarComponent {
-
+  single = [
-  single = [{
+    {
       name: 'Germany',
       value: 8940000,
-  }, {
+    },
+    {
       name: 'USA',
       value: 5000000,
-  }, {
+    },
+    {
       name: 'France',
       value: 7200000,
-  }];
+    },
-
+  ];
   view: any[] = [700, 400];
-
   showLegend = true;
-
   colorScheme = {
     domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
   };
-
   showXAxis = true;
-
   showYAxis = true;
-
   showLabels = true;
-
   showXAxisLabel = true;
-
   xAxisLabel = 'Country';
-
   showYAxisLabel = true;
-
   yAxisLabel = 'Population';
-
 }

src/app/pages/charts/d3/d3-line.component.ts

@@ -18,56 +18,57 @@ import { Component } from '@angular/core';
   `,
 })
 export class D3LineComponent {
-
+  multi = [
-  multi = [{
+    {
       name: 'Germany',
-    series: [{
+      series: [
+        {
           name: '2010',
           value: 7300000,
-    }, {
+        },
+        {
           name: '2011',
           value: 8940000,
-    }],
+        },
-  }, {
+      ],
+    },
+    {
       name: 'USA',
-    series: [{
+      series: [
+        {
           name: '2010',
           value: 7870000,
-    }, {
+        },
+        {
           name: '2011',
           value: 8270000,
-    }],
+        },
-  }, {
+      ],
+    },
+    {
       name: 'France',
-    series: [{
+      series: [
+        {
           name: '2010',
           value: 5000002,
-    }, {
+        },
+        {
           name: '2011',
           value: 5800000,
-    }],
+        },
-  }];
+      ],
-
+    },
+  ];
   view: any[] = [700, 400];
-
   showLegend = true;
-
   colorScheme = {
     domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
   };
-
   showXAxis = true;
-
   showYAxis = true;
-
   showLabels = true;
-
   showXAxisLabel = true;
-
   xAxisLabel = 'Country';
-
   showYAxisLabel = true;
-
   yAxisLabel = 'Population';
-
 }

src/app/pages/charts/d3/d3-pie.component.ts

@@ -3,44 +3,40 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'ngx-d3-pie',
   template: `
-    <ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="single" [legend]="showLegend"
+    <ngx-charts-pie-chart
+      [view]="view"
+      [scheme]="colorScheme"
+      [results]="single"
+      [legend]="showLegend"
       [labels]="showLabels">
     </ngx-charts-pie-chart>
   `,
 })
 export class D3PieComponent {
-
+  single = [
-  single = [{
+    {
       name: 'Germany',
       value: 8940000,
-  }, {
+    },
+    {
       name: 'USA',
       value: 5000000,
-  }, {
+    },
+    {
       name: 'France',
       value: 7200000,
-  }];
+    },
-
+  ];
   view: any[] = [700, 400];
-
   showLegend = true;
-
   colorScheme = {
     domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
   };
-
   showXAxis = true;
-
   showYAxis = true;
-
   showLabels = true;
-
   showXAxisLabel = true;
-
   xAxisLabel = 'Country';
-
   showYAxisLabel = true;
-
   yAxisLabel = 'Population';
-
 }

src/app/pages/charts/d3/d3-plot.component.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-d3-plot',
-  template: ``,
-})
-export class D3PlotComponent {
-}

src/app/pages/charts/d3/d3-polar.component.ts

@@ -2,7 +2,86 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-d3-polar',
-  template: ``,
+  template: `
+    <ngx-charts-polar-chart
+      [view]="view"
+      [scheme]="colorScheme"
+      [results]="multi"
+      [xAxis]="showXAxis"
+      [yAxis]="showYAxis"
+      [legend]="showLegend"
+      [showXAxisLabel]="showXAxisLabel"
+      [showYAxisLabel]="showYAxisLabel"
+      [xAxisLabel]="xAxisLabel"
+      [yAxisLabel]="yAxisLabel"
+      [autoScale]="autoScale">
+    </ngx-charts-polar-chart>
+  `,
 })
 export class D3PolarComponent {
+  multi = [
+    {
+      name: 'Germany',
+      series: [
+        {
+          name: '1990',
+          value: 31476,
+        },
+        {
+          name: '2000',
+          value: 36953,
+        },
+        {
+          name: '2010',
+          value: 40632,
+        },
+      ],
+    },
+    {
+      name: 'USA',
+      series: [
+        {
+          name: '1990',
+          value: 37060,
+        },
+        {
+          name: '2000',
+          value: 45986,
+        },
+        {
+          name: '2010',
+          value: 49737,
+        },
+      ],
+    },
+    {
+      name: 'France',
+      series: [
+        {
+          name: '1990',
+          value: 29476,
+        },
+        {
+          name: '2000',
+          value: 34774,
+        },
+        {
+          name: '2010',
+          value: 36240,
+        },
+      ],
+    },
+  ];
+  view: any[] = [700, 400];
+  showLegend = true;
+  colorScheme = {
+    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
+  };
+  autoScale = true;
+  showXAxis = true;
+  showYAxis = true;
+  showXAxisLabel = true;
+  showYAxisLabel = true;
+  xAxisLabel = 'Country';
+  yAxisLabel = 'Population';
 }

src/app/pages/charts/d3/d3.component.html

@@ -25,20 +25,26 @@
   </div>
   <div class="col-lg-6">
     <nga-card size="large">
-      <nga-card-header>Equatin Plots</nga-card-header>
+      <nga-card-header>Advanced Pie</nga-card-header>
-      <nga-card-body></nga-card-body>
+      <nga-card-body>
+        <ngx-d3-advanced-pie></ngx-d3-advanced-pie>
+      </nga-card-body>
     </nga-card>
   </div>
   <div class="col-lg-6">
     <nga-card size="large">
       <nga-card-header>Area Chart</nga-card-header>
-      <nga-card-body></nga-card-body>
+      <nga-card-body>
+        <ngx-d3-area-stack></ngx-d3-area-stack>
+      </nga-card-body>
     </nga-card>
   </div>
   <div class="col-lg-6">
     <nga-card size="large">
       <nga-card-header>Polar Chart</nga-card-header>
-      <nga-card-body></nga-card-body>
+      <nga-card-body>
+        <ngx-d3-polar></ngx-d3-polar>
+      </nga-card-body>
     </nga-card>
   </div>
 </div>

src/app/pages/charts/d3/d3.component.ts

@@ -4,5 +4,4 @@ import { Component } from '@angular/core';
   selector: 'ngx-d3',
   templateUrl: './d3.component.html',
 })
-export class D3Component {
+export class D3Component {}
-}

src/app/pages/charts/echarts/echarts-area-stack.component.ts

@@ -2,7 +2,92 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-echarts-area-stack',
-  template: ``,
+  template: `
+    <div echarts [options]="options" class="echart"></div>
+  `,
 })
 export class EchartsAreaStackComponent {
+  options = {
+    title: {
+      text: '堆叠区域图',
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+    },
+    legend: {
+      data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {},
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+      },
+    ],
+    series: [
+      {
+        name: '邮件营销',
+        type: 'line',
+        stack: '总量',
+        areaStyle: { normal: {} },
+        data: [120, 132, 101, 134, 90, 230, 210],
+      },
+      {
+        name: '联盟广告',
+        type: 'line',
+        stack: '总量',
+        areaStyle: { normal: {} },
+        data: [220, 182, 191, 234, 290, 330, 310],
+      },
+      {
+        name: '视频广告',
+        type: 'line',
+        stack: '总量',
+        areaStyle: { normal: {} },
+        data: [150, 232, 201, 154, 190, 330, 410],
+      },
+      {
+        name: '直接访问',
+        type: 'line',
+        stack: '总量',
+        areaStyle: { normal: {} },
+        data: [320, 332, 301, 334, 390, 330, 320],
+      },
+      {
+        name: '搜索引擎',
+        type: 'line',
+        stack: '总量',
+        label: {
+          normal: {
+            show: true,
+            position: 'top',
+          },
+        },
+        areaStyle: { normal: {} },
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+      },
+    ],
+  };
 }

src/app/pages/charts/echarts/echarts-bar-animation.component.ts

@@ -2,7 +2,73 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-echarts-bar-animation',
-  template: ``,
+  template: `
+    <div echarts [options]="options" class="echart"></div>
+  `,
 })
 export class EchartsBarAnimationComponent {
+  xAxisData = [];
+  data1 = [];
+  data2 = [];
+
+  options = {
+    title: {
+      text: '柱状图动画延迟',
+    },
+    legend: {
+      data: ['bar', 'bar2'],
+      align: 'left',
+    },
+    toolbox: {
+      // y: 'bottom',
+      feature: {
+        magicType: {
+          type: ['stack', 'tiled'],
+        },
+        dataView: {},
+        saveAsImage: {
+          pixelRatio: 2,
+        },
+      },
+    },
+    tooltip: {},
+    xAxis: {
+      data: this.xAxisData,
+      silent: false,
+      splitLine: {
+        show: false,
+      },
+    },
+    yAxis: {},
+    series: [
+      {
+        name: 'bar',
+        type: 'bar',
+        data: this.data1,
+        animationDelay: function(idx) {
+          return idx * 10;
+        },
+      },
+      {
+        name: 'bar2',
+        type: 'bar',
+        data: this.data2,
+        animationDelay: function(idx) {
+          return idx * 10 + 100;
+        },
+      },
+    ],
+    animationEasing: 'elasticOut',
+    animationDelayUpdate: function(idx) {
+      return idx * 5;
+    },
+  };
+
+  constructor() {
+    for (let i = 0; i < 100; i++) {
+      this.xAxisData.push('类目' + i);
+      this.data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
+      this.data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
+    }
+  }
 }

src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts

@@ -2,7 +2,116 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-echarts-multiple-xaxis',
-  template: ``,
+  template: `
+    <div echarts [options]="options" class="echart"></div>
+  `,
 })
 export class EchartsMultipleXaxisComponent {
+  private colors = ['#5793f3', '#d14a61', '#675bba'];
+
+  options = {
+    color: this.colors,
+
+    tooltip: {
+      trigger: 'none',
+      axisPointer: {
+        type: 'cross',
+      },
+    },
+    legend: {
+      data: ['2015 降水量', '2016 降水量'],
+    },
+    grid: {
+      top: 70,
+      bottom: 50,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLine: {
+          onZero: false,
+          lineStyle: {
+            color: this.colors[1],
+          },
+        },
+        axisPointer: {
+          label: {
+            formatter: function(params) {
+              return '降水量  ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
+            },
+          },
+        },
+        data: [
+          '2016-1',
+          '2016-2',
+          '2016-3',
+          '2016-4',
+          '2016-5',
+          '2016-6',
+          '2016-7',
+          '2016-8',
+          '2016-9',
+          '2016-10',
+          '2016-11',
+          '2016-12',
+        ],
+      },
+      {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLine: {
+          onZero: false,
+          lineStyle: {
+            color: this.colors[0],
+          },
+        },
+        axisPointer: {
+          label: {
+            formatter: params => {
+              return '降水量  ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
+            },
+          },
+        },
+        data: [
+          '2015-1',
+          '2015-2',
+          '2015-3',
+          '2015-4',
+          '2015-5',
+          '2015-6',
+          '2015-7',
+          '2015-8',
+          '2015-9',
+          '2015-10',
+          '2015-11',
+          '2015-12',
+        ],
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+      },
+    ],
+    series: [
+      {
+        name: '2015 降水量',
+        type: 'line',
+        xAxisIndex: 1,
+        smooth: true,
+        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+      },
+      {
+        name: '2016 降水量',
+        type: 'line',
+        smooth: true,
+        data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7],
+      },
+    ],
+  };
 }

src/app/pages/charts/echarts/echarts-radar.component.ts

@@ -2,7 +2,46 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-echarts-radar',
-  template: ``,
+  template: `
+    <div echarts [options]="options" class="echart"></div>
+  `,
 })
 export class EchartsRadarComponent {
+  options = {
+    title: {
+      text: '基础雷达图',
+    },
+    tooltip: {},
+    legend: {
+      data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
+    },
+    radar: {
+      // shape: 'circle',
+      indicator: [
+        { name: '销售（sales）', max: 6500 },
+        { name: '管理（Administration）', max: 16000 },
+        { name: '信息技术（Information Techology）', max: 30000 },
+        { name: '客服（Customer Support）', max: 38000 },
+        { name: '研发（Development）', max: 52000 },
+        { name: '市场（Marketing）', max: 25000 },
+      ],
+    },
+    series: [
+      {
+        name: '预算 vs 开销（Budget vs spending）',
+        type: 'radar',
+        // areaStyle: {normal: {}},
+        data: [
+          {
+            value: [4300, 10000, 28000, 35000, 50000, 19000],
+            name: '预算分配（Allocated Budget）',
+          },
+          {
+            value: [5000, 14000, 28000, 31000, 42000, 21000],
+            name: '实际开销（Actual Spending）',
+          },
+        ],
+      },
+    ],
+  };
 }

src/app/pages/charts/echarts/echarts.component.html

@@ -26,19 +26,33 @@
   <div class="col-lg-6">
     <nga-card size="large">
       <nga-card-header>Multiple x-axis</nga-card-header>
-      <nga-card-body></nga-card-body>
+      <nga-card-body>
+        <ngx-echarts-multiple-xaxis></ngx-echarts-multiple-xaxis>
+      </nga-card-body>
     </nga-card>
   </div>
   <div class="col-lg-6">
     <nga-card size="large">
       <nga-card-header>Area Stack</nga-card-header>
-      <nga-card-body></nga-card-body>
+      <nga-card-body>
+        <ngx-echarts-area-stack></ngx-echarts-area-stack>
+      </nga-card-body>
     </nga-card>
   </div>
   <div class="col-lg-6">
     <nga-card size="large">
       <nga-card-header>Bar Animation</nga-card-header>
-      <nga-card-body></nga-card-body>
+      <nga-card-body>
+        <ngx-echarts-bar-animation></ngx-echarts-bar-animation>
+      </nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-lg-6">
+    <nga-card size="large">
+      <nga-card-header>Radar</nga-card-header>
+      <nga-card-body>
+        <ngx-echarts-radar></ngx-echarts-radar>
+      </nga-card-body>
     </nga-card>
   </div>
 </div>

src/app/pages/charts/echarts/echarts.component.scss

@@ -1,8 +1,9 @@
 @import '../../../@theme/styles/variables';
 
 @include nga-install-component() {
-
+  ngx-echarts-pie,
-  ngx-echarts-pie, ngx-echarts-bar, ngx-echarts-line {
+  ngx-echarts-bar,
+  ngx-echarts-line {
     display: block;
     height: 100%;
   }

src/app/pages/charts/echarts/echarts.component.ts

@@ -5,5 +5,4 @@ import { Component } from '@angular/core';
   styleUrls: ['./echarts.component.scss'],
   templateUrl: './echarts.component.html',
 })
-export class EchartsComponent {
+export class EchartsComponent {}
-}