why angular-d3-charts is not working?

Question

**HTML:**
    <angular-d3-donut [id]="donutChartId" [data]="donutChartData"></angular-d3-donut>  
    **App.module.ts:**

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import 'd3';
    import 'nvd3';
    import {NvD3Module} from "ng2-nvd3";
    import { DoughnutChartComponent, PieChartComponent, BarChartComponent } from 'angular-d3-charts'; // this is needed!
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        NvD3Module,
       DoughnutChartComponent, 
       PieChartComponent, 
       BarChartComponent
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    **Index.html:**
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    **Donut chart component.ts:**


    import {Component, ValueProvider} from '@angular/core';
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {

      options: any;
      data: any;
      donutChartId:any;

      constructor() {
    }
          public donutChartData = [{
          id: 0, // number
          label: 'label name',  // string
          value: 50,  // number
          color: 'color of slice',  // string,
          iconImage: 'path of image' // string
       },{
          id: 1, // number
          label: 'label name',  // string
          value: 100,  // number
          color: 'color of slice',  // string,
          iconImage: 'path of image' // string
       }
       ]
      }

Now i am working in d3 chart and i installed (npm install angular-d3-charts --save).I followed each and every step they provided but i have in html page ([data]="donutChartData").The error is

Multiple annotations found at this line: - Identifier 'donutChartData' is not defined. The component declaration, template variable declarations, and element references do not contain such a member - Can't bind to 'data' since it isn't a known property of 'angular-d3-donut'. 1. If 'angular-d3-donut' is an Angular component and it has 'data' input, then verify that it is part of this module. 2. If 'angular-d3-donut' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. don't know to solve this anyone give me some idea to work it properly.

Sanoj_V Sanoj_V · Accepted Answer · 2018-05-22T07:30:18

Inject component into declaration instead of import in ngModule:

import { DoughnutChartComponent, PieChartComponent, BarChartComponent } from 'angular-d3-charts';

@NgModule({
  declarations: [
    AppComponent,
    DoughnutChartComponent, 
    PieChartComponent, 
    BarChartComponent
  ],
  bootstrap: [AppComponent]
})

you can check documentaion here: angular-d3-charts

why angular-d3-charts is not working?

1 Answers