How to add license key for fusion charts in angular2

Question

As explained here in fusion charts documentation, it doesn't work for angular. How can I implement this for the angular projects?

Fusion chart license

FusionCharts.options.license({ key: '', creditLabel: false, });

Answer 1

Please use the below code into your app.module.ts

FusionCharts.options['license']({ key: '', creditLabel: false, });

NB:If Still error occurs the please check your tsconfig.json and trun off the strict : true option.

Thanks

Answer 2

You can try with the below steps to use your licensed version of FusionCharts:

1. Create a folder named fusioncharts in your project root or elsewhere and copy the library module files of your licensed version of FusionCharts into that folder.

2. Install the angular2-fusioncharts wrapper:

   npm install angular2-fusioncharts --save

After installing angular2-fusioncharts, import it in your Angular AppModule as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FusionChartsModule } from 'angular4-fusioncharts';
import * as FusionCharts from './fusioncharts';
import * as Charts from './fusioncharts/fusioncharts.charts';
import * as FintTheme from './fusioncharts/themes/fusioncharts.theme.fint';
import { AppComponent } from './app.component';
FusionChartsModule.fcRoot(FusionCharts, Charts, FintTheme);
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FusionChartsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

Once the library is imported, you can use this component in your Angular application:

In your Angular AppComponent:

import { Component } from '@angular/core';
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
    })
    export class AppComponent {
        id = 'chart1';
        width = 600;
        height = 400;
        type = 'column2d';
        dataFormat = 'json';
        dataSource;
        title = 'Angular4 FusionCharts Sample';
        constructor() {
            this.dataSource = {
                "chart": {
                    "caption": "Harry's SuperMart",
                    "subCaption": "Top 5 stores in last month by revenue",
                    "numberprefix": "$",
                    "theme": "fint"
                },
                "data": [
                    {
                        "label": "Bakersfield Central",
                        "value": "880000"
                    },
                    {
                        "label": "Garden Groove harbour",
                        "value": "730000"
                    },
                    {
                        "label": "Los Angeles Topanga",
                        "value": "590000"
                    },
                    {
                        "label": "Compton-Rancho Dom",
                        "value": "520000"
                    },
                    {
                        "label": "Daly City Serramonte",
                        "value": "330000"
                    }
                ]
            }
        }
    }

Now, You can use component in your app.component.html template:

<h1>
  {{title}}
</h1>
<fusioncharts
    [width]="width"
    [height]="height"
    [type]="type"
    [dataFormat]="dataFormat"
    [dataSource]="dataSource"
></fusioncharts>

Check this document - https://www.fusioncharts.com/dev/upgrading/license-activation