Chart type "heatmap" is not available. Is there anyway to integrate heatmap with angular4 ?

[chinthu]

[rousan]

Hi @chinthu, You can easily use heatmap with angular4-fusioncharts wrapper.

For this case, you need to import PowerCharts module in your app.module.ts file as follows:

app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import * as FusionCharts from 'fusioncharts';
// Here import powercharts module
import * as PowerCharts from 'fusioncharts/fusioncharts.powercharts';
import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';
import * as OceanTheme from 'fusioncharts/themes/fusioncharts.theme.ocean';
import { FusionChartsModule } from 'angular4-fusioncharts';
import { AppComponent } from './app.component';

FusionChartsModule.fcRoot(FusionCharts, PowerCharts, FintTheme, OceanTheme);

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FusionChartsModule
    ],
    providers: [],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Let us know if you face any problem using it.

[sachien2000]

Can we customise the heat map, like adding an icon in a column , something like markers ?

[rousan]

@sachien2000 You can customize the heatmap chart with various of available attributes. Click here to get detailed instructions.

[chinthu]

Anything we need to import for guages ? is there any detailed documentation available for these chart types ?

[rousan]

@chinthu You need to import widgets module for guages as follows:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import * as FusionCharts from 'fusioncharts';
// Here import widgets module
import * as Widgets from 'fusioncharts/fusioncharts.widgets';
import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';
import * as OceanTheme from 'fusioncharts/themes/fusioncharts.theme.ocean';
import { FusionChartsModule } from 'angular4-fusioncharts';
import { AppComponent } from './app.component';

FusionChartsModule.fcRoot(FusionCharts, Widgets, FintTheme, OceanTheme);

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FusionChartsModule
    ],
    providers: [],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Here is the reference link for those chart types.