title: Module '"../../@types/chart.js"' has no exported member 'Color' in chartjs-plugin-annotation
body: <p>I have to use chartjs-plugin-annotation in angular application. I have installed this plugin and I am getting below error</p>
  <blockquote>
  <p>Invalid module name in augmentation. Module 'chart.js' resolves to an untyped module at '/node_modules/chart.js/dist/Chart.js', which cannot be augmented</p>
  </blockquote>
  <p>I had googled and I get to use</p>
  <pre><code>npm install @types/chart.js
  </code></pre>
  <p>This resolved the previous error but it generating new errors like</p>
  <blockquote>
  <p>Module '&quot;../../@types/chart.js&quot;' has no exported member 'Color'.</p>
  <p>Module '&quot;../../@types/chart.js&quot;' has no exported member 'FontSpec'.</p>
  <p>Module '&quot;../../@types/chart.js&quot;' has no exported member 'Plugin'.</p>
  </blockquote>
  <p>What am I doing wrong here?</p>
  <p>My Code is</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Chart, ChartOptions} from 'chart.js';
  
  import annotationPlugin from 'chartjs-plugin-annotation';
  
  @Component({
    selector: 'app-financial-chart',
    templateUrl: './financial-chart.component.html',
    styleUrls: ['./financial-chart.component.css']
  })
  export class FinancialChartComponent implements OnInit {
    Linechart = [];
    constructor() { }
  
    ngOnInit() {
      
      Chart.plugins.register(annotationPlugin);
      
      
          const config = {
              type: 'line',
              data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                  label: 'My First Dataset',
                  data: [65, 59, 80, 81, 56, 55, 40],
                  fill: false,
                  borderColor: 'rgb(75, 192, 192)',
                  tension: 0.1
                }]
              },
              options: {
                plugins: {
                  autocolors: false,
                  annotation: {
                    annotations: {
                      box1: {
                        // Indicates the type of annotation
                        type: 'box',
                        xMin: 1,
                        xMax: 2,
                        yMin: 50,
                        yMax: 70,
                        backgroundColor: 'rgba(255, 99, 132, 0.25)'
                      }
                    }
                  }
                }
              }
            };
      
      
  this.Linechart.push( new Chart('canvas',config));
  
    }
  
  }
  </code></pre>
  <p>my package.json is below
  <a href="https://i.stack.imgur.com/59BuS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/59BuS.png" alt="package.json" /></a></p>