gevgeny / angular2-highcharts

:bar_chart: :chart_with_upwards_trend: Highcharts for your Angular project
MIT License
380 stars 113 forks source link

Map is unknown chart type. #212

Open tprjd opened 7 years ago

tprjd commented 7 years ago
 Map is unknown chart type.
    at Object.initChart (initChart.js:9)
    at ChartComponent.webpackJsonp../node_modules/angular2-highcharts/dist/ChartComponent.js.ChartComponent.init (ChartComponent.js:45)

module.ts

import { ChartModule } from 'angular2-highcharts';
import { RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { NgModule } from '@angular/core';

@NgModule({
    declarations: [
        DashboardComponent
    ],
    imports: [
        RouterModule,
        ChartModule.forRoot(
            require('highcharts/highmaps'),
        ),
    ]
})
export class DashboardModule {}

The dashboard.component contains the options from the webpack example.

html

<chart type="Map" [options]="options"></chart>

Highstock is working tho./highstock.src.js"`

What could be the problem?

Thanks.

vmohir commented 6 years ago

Up. I have the same problem

vmohir commented 6 years ago

I fixed the problem with this code (And I don't know what it does! Just solved my problem).

app.module.ts

import { ChartModule } from 'angular2-highcharts';
declare let require: any;
export function highchartsFactory() {
  return require('highcharts/highmaps');
}
@NgModule({
  // ...
  imports: [
    ChartModule,
  ],
  providers: [
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    }

To test the map, you can use this.options from this link.

sanketsw commented 6 years ago

I fixed using following code. I was missing require('highcharts/modules/map')(hc);

export function highchartsFactory() {
    const hc = require('highcharts');
    require('highcharts/modules/heatmap')(hc);
    require('highcharts/modules/map')(hc);
    require('highcharts/modules/drilldown')(hc);
    require('highcharts/modules/exporting')(hc);
    require('highcharts/modules/offline-exporting')(hc);
    require('highcharts/modules/export-data')(hc);
    return hc;
}

And add the factory to providers

providers: [
        {
            provide: HighchartsStatic,
            useFactory: highchartsFactory
        }
    ],