title: Why show this error,",Uncaught ReferenceError: c3 is not defined"
body: <p>I have created one calculator in that calculator i have use pie chart to show data  dynamically,but chart throw error.The code is given below,</p>
  
  <p><strong>custom.min.js</strong> in this js file i have usen c3 chart,</p>
  
  <pre><code>var chart = c3.generate({
      data: {
          columns: [
              ["Interest Payable", 3900519],
              ["Principal", 3e6]
          ],
          type: "pie"
      },
      axis: { x: { label: "Sepal.Width" }, y: { label: "Petal.Width" } },
      legend: { show: !1 },
      tooltip: { format: { title: function(t) { return "" }, value: function(t, e, n) { return t } }, contents: tooltip_contents }
  });
  </code></pre>
  
  <p>I have usen this plugin to done this <strong>:</strong> <strong>c3.min.js,c3_renderers.min.js,d3.min.js,d3.v3.min.js,pivot.min.js.</strong></p>
  
  <p>I have downloaded this plugin and put inside the asset folder and I am call this js file by scriptloaderService, and this scriptloaderService imported inside component.</p>
  
  <p><strong>DynamicScriptLoaderServiceService</strong> this is scriptloaderServise code.</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  interface Scripts {
    name: string;
    src: string;
  }
  
  export const ScriptStore: Scripts[] = [
    { name: 'd3.v3.min.js', src: './assets/Scripts/d3.v3.min.js' },
    { name: 'd3.min.js', src: './assets/Scripts/d3.min.js'},
    { name: 'c3.min.js', src: './assets/Scripts/c3.min.js' },
    { name: 'custom.min.js', src: './assets/Scripts/custom.min.js' },
  ];
  
  declare var document: any;
  
  @Injectable()
  export class DynamicScriptLoaderServiceService {
  
  
    private scripts: any = {};
  
    constructor() {
      ScriptStore.forEach((script: any) =&gt; {
        this.scripts[script.name] = {
          loaded: false,
          src: script.src
        };
      });
    }
  
    load(...scripts: string[]) {
      const promises: any[] = [];
      scripts.forEach((script) =&gt; promises.push(this.loadScript(script)));
      return Promise.all(promises);
    }
  
    loadScript(name: string) {
      return new Promise((resolve, reject) =&gt; {
        if (!this.scripts[name].loaded) {
          //load script
          let script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = this.scripts[name].src;
          if (script.readyState) {  //IE
              script.onreadystatechange = () =&gt; {
                  if (script.readyState === "loaded" || script.readyState === "complete") {
                      script.onreadystatechange = null;
                      this.scripts[name].loaded = true;
                      resolve({script: name, loaded: true, status: 'Loaded'});
                  }
              };
          } else {  //Others
              script.onload = () =&gt; {
                  this.scripts[name].loaded = true;
                  resolve({script: name, loaded: true, status: 'Loaded'});
              };
          }
          script.onerror = (error: any) =&gt; resolve({script: name, loaded: false, status: 'Loaded'});
          document.getElementsByTagName('head')[0].appendChild(script);
        } else {
          resolve({ script: name, loaded: true, status: 'Already Loaded' });
        }
      });
    }
  }
  
  </code></pre>
  
  <p><strong>CalcyComponent</strong> this is component in which service and JS file was called to show pie chart.</p>
  
  <pre><code>import { Component, OnInit, AfterViewInit } from '@angular/core';
  import { DynamicScriptLoaderServiceService } from '../../../ScriptLoaderService/dynamic-script-loader-service.service';
  
  @Component({
    selector: 'app-calcy',
    templateUrl: './calcy.component.html',
    styleUrls: ['./calcy.component.css']
  })
  export class CalcyComponent implements OnInit, AfterViewInit {
  
    constructor(private dynamicScriptLoader:DynamicScriptLoaderServiceService) { }
  
    ngOnInit() {
      this.loadScripts();
    }
  
    ngAfterViewInit() { }
  
    loadScripts() {
      // You can load multiple scripts by just providing the key as argument into load method of the service
      this.dynamicScriptLoader.load(
      'd3.v3.min.js','d3.min.js','c3.min.js','custom.min.js',).then(data =&gt; {
        // Script Loaded Successfully
      }).catch(error =&gt; console.log(error));
    }
  }
  
  </code></pre>
  
  <p><strong>calcy.component.html</strong> this is template where chart should be show, I have given small code of that.</p>
  
  <pre><code>&lt;div class="abc"&gt;
      &lt;div id="chart" class="chart" style="width: 320px; height: 285px;"&gt;&lt;/div&gt;
      &lt;div style="display: none;"&gt;
          &lt;div title="" style="width: 454px;
                  height: 319px;"&gt;
              &lt;!-- &lt;div id="Graph"&gt;&lt;/div&gt; --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <blockquote>
    <p>Main error shown by browser is this. "Uncaught ReferenceError: c3 is not defined"</p>
  </blockquote>
  
  <p><strong><em>any one can help in this code????</em></strong></p>