title: Chart JS +ng2-charts not working on Angular+2
body: <p>Hello developers i have been literally the whole day trying to implement charts on my proyect , but following the official docs there is not way i could rid off this error :</p>
  <pre><code>ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 317:8-21
  &quot;export 'pluginService' was not found in 'chart.js'
   node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:59 - error TS2305: Module '&quot;../../chart.js/types/index.esm&quot;' has no exported member 
  'ChartPoint'.
      
      4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                  ~~~~~~~~~~
      node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:82 - error TS2305: Module '&quot;../../chart.js/types/index.esm&quot;' has no exported member 
  'PluginServiceGlobalRegistration'.
      
      4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:115 - error TS2305: Module '&quot;../../chart.js/types/index.esm&quot;' has no exported member 'PluginServiceRegistrationOptions'.
      
      4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      node_modules/ng2-charts/lib/base-chart.directive.d.ts:32:12 - error TS2304: Cannot find name 'Chart'.
      
      32     chart: Chart;
                    ~~~~~
      node_modules/ng2-charts/lib/base-chart.directive.d.ts:56:35 - error TS2304: Cannot find name 'Chart'.
      
      56     getChartBuilder(ctx: string): Chart;
                                           ~~~~~
      src/app/components/graphics/graphics.component.ts:6:20 - error TS2305: Module '&quot;../../../../node_modules/chart.js/types/index.esm&quot;' has no exported member 'pluginService'.
      
      6 import { ChartType,pluginService} from 'chart.js';
                           ~~~~~~~~~~~~~
      
  
  Date: 2021-04-03T22:59:36.844Z - Hash: 2c8378fd3f46cd7e10f8
  6 unchanged chunks
  
  Time: 2109ms
  
  ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 317:8-21
  &quot;export 'pluginService' was not found in 'chart.js'
  
  ERROR in ./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js 324:8-21
  &quot;export 'pluginService' was not found in 'chart.js'
      
      ERROR in node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:30 - error TS2724: Module '&quot;../../chart.js/types/index.esm&quot;' has no exported member 'ChartDataSets'. Did you mean 'ChartDataset'?
      
      4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                     ~~~~~~~~~~~~~
      node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:59 - error TS2305: Module '&quot;../../chart.js/types/index.esm&quot;' has no exported member 
  'ChartPoint'.
      
      4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                  ~~~~~~~~~~
      node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:82 - error TS2305: Module '&quot;../../chart.js/types/index.esm&quot;' has no exported member 
  'PluginServiceGlobalRegistration'.
      
      4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:115 - error TS2305: Module '&quot;../../chart.js/types/index.esm&quot;' has no exported member 'PluginServiceRegistrationOptions'.
      
      4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
                                                                                                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      node_modules/ng2-charts/lib/base-chart.directive.d.ts:32:12 - error TS2304: Cannot find name 'Chart'.
      
      32     chart: Chart;
                    ~~~~~
      node_modules/ng2-charts/lib/base-chart.directive.d.ts:56:35 - error TS2304: Cannot find name 'Chart'.
      
      56     getChartBuilder(ctx: string): Chart;
                                           ~~~~~
      
  
  </code></pre>
  <p>All this when I'm trying to implement ng2-charts wrapping chart.js from its official site through the commands:</p>
  <pre><code>npm install --save ng2-charts
  
  npm install --save chart.js
  </code></pre>
  <p>My package.json has this structure:</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;name&quot;: &quot;front&quot;,
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;scripts&quot;: {
      &quot;ng&quot;: &quot;ng&quot;,
      &quot;start&quot;: &quot;ng serve&quot;,
      &quot;build&quot;: &quot;ng build&quot;,
      &quot;test&quot;: &quot;ng test&quot;,
      &quot;lint&quot;: &quot;ng lint&quot;,
      &quot;e2e&quot;: &quot;ng e2e&quot;,
      &quot;postinstall&quot;: &quot;ngcc&quot;
    },
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@angular/animations&quot;: &quot;~10.0.5&quot;,
      &quot;@angular/cdk&quot;: &quot;^10.2.7&quot;,
      &quot;@angular/common&quot;: &quot;~10.0.5&quot;,
      &quot;@angular/compiler&quot;: &quot;~10.0.5&quot;,
      &quot;@angular/core&quot;: &quot;~10.0.5&quot;,
      &quot;@angular/forms&quot;: &quot;~10.0.5&quot;,
      &quot;@angular/material&quot;: &quot;^10.2.7&quot;,
      &quot;@angular/platform-browser&quot;: &quot;~10.0.5&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;~10.0.5&quot;,
      &quot;@angular/router&quot;: &quot;~10.0.5&quot;,
      &quot;@mapbox/mapbox-gl-geocoder&quot;: &quot;^4.7.0&quot;,
      &quot;@ngrx/effects&quot;: &quot;^10.1.2&quot;,
      &quot;@ngrx/store&quot;: &quot;^10.1.2&quot;,
      &quot;@ngrx/store-devtools&quot;: &quot;^10.1.2&quot;,
      &quot;@swimlane/ngx-charts&quot;: &quot;^17.0.1&quot;,
      &quot;@swimlane/ngx-datatable&quot;: &quot;^19.0.0&quot;,
      &quot;angular-datatables&quot;: &quot;^11.1.1&quot;,
      &quot;bootstrap&quot;: &quot;^4.6.0&quot;,
      &quot;chart.js&quot;: &quot;^3.0.1&quot;,
      &quot;chartjs-plugin-datalabels&quot;: &quot;^0.7.0&quot;,
      &quot;datatables.net&quot;: &quot;^1.10.20&quot;,
      &quot;datatables.net-dt&quot;: &quot;^1.10.20&quot;,
      &quot;jquery&quot;: &quot;^3.6.0&quot;,
      &quot;mapbox-gl&quot;: &quot;^2.2.0&quot;,
      &quot;ng2-charts&quot;: &quot;^2.4.2&quot;,
      &quot;popper.js&quot;: &quot;^1.16.1&quot;,
      &quot;rxjs&quot;: &quot;~6.5.5&quot;,
      &quot;tslib&quot;: &quot;^2.0.0&quot;,
      &quot;uuid&quot;: &quot;^8.3.2&quot;,
      &quot;zone.js&quot;: &quot;~0.10.3&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular-devkit/build-angular&quot;: &quot;~0.1000.4&quot;,
      &quot;@angular/cli&quot;: &quot;~10.0.4&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;~10.0.5&quot;,
      &quot;@types/datatables.net&quot;: &quot;^1.10.18&quot;,
      &quot;@types/jasmine&quot;: &quot;~3.5.0&quot;,
      &quot;@types/jasminewd2&quot;: &quot;~2.0.3&quot;,
      &quot;@types/jquery&quot;: &quot;^3.3.33&quot;,
      &quot;@types/node&quot;: &quot;^12.11.1&quot;,
      &quot;codelyzer&quot;: &quot;^6.0.0&quot;,
      &quot;jasmine-core&quot;: &quot;~3.5.0&quot;,
      &quot;jasmine-spec-reporter&quot;: &quot;~5.0.0&quot;,
      &quot;karma&quot;: &quot;~5.0.0&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
      &quot;karma-coverage-istanbul-reporter&quot;: &quot;~3.0.2&quot;,
      &quot;karma-jasmine&quot;: &quot;~3.3.0&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^1.5.0&quot;,
      &quot;protractor&quot;: &quot;~7.0.0&quot;,
      &quot;ts-node&quot;: &quot;~8.3.0&quot;,
      &quot;tslint&quot;: &quot;~6.1.0&quot;,
      &quot;typescript&quot;: &quot;~3.9.5&quot;
    }
  }
  
  </code></pre>
  <p>And the ChartModule is implemented in the app.module, as well as the modularized component I might be setting the charts at.</p>
  <p>I'm not sure why this situation.
  Any help would be amazing.
  Thanks in advance</p>