angular2-highcharts
angular2-highcharts copied to clipboard
Map is unknown chart type.
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.
Up. I have the same problem
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.
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
}
],