Hello everybody, i'm doing a migration with highchart, highmaps from angularJS1.4 to angular 5 and i have one problem and i don't know how to resolve it :
i followed your documentation and i can display in my application the line chart like your example in this URL : https://stackblitz.com/edit/angular-9nkrgd
but when i try to display the map with highmaps, i have one problem caused by Highcharts.maps['custom/world']
my code is :
//gfx.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src';
import highmaps from 'highcharts/modules/map.src';
import { MapComponent } from './gfx.map.component';
import { GfxService } from './gfx.service';
export function highchartsModules() {
// apply Highcharts Modules to this array
return [ highmaps, exporting ];
}
//gfx.map.component.ts
import { Component, OnInit } from '@angular/core';
import { GfxService } from './gfx.service';
//We import Chart and MapChart
import { Chart } from 'angular-highcharts';
import { MapChart } from 'angular-highcharts';
//sorry my file is very long so i show you just the essential of my porblem:
{
"allAreas": false,
"zIndex":1,
"name": "America",
"color":"#9bc121",
"joinBy": ["iso-a2", "code"],
"mapData": Highcharts.maps['custom/world'],
"data": [{
"drilldown":"US",
"code": "US"
}, {
"drilldown":"MX",
"code": "MX"
}, {
"drilldown":"AR",
"code": "AR"
}, {
"drilldown":"BR",
"code": "BR"
}]
Hello everybody, i'm doing a migration with highchart, highmaps from angularJS1.4 to angular 5 and i have one problem and i don't know how to resolve it :
i followed your documentation and i can display in my application the line chart like your example in this URL : https://stackblitz.com/edit/angular-9nkrgd but when i try to display the map with highmaps, i have one problem caused by Highcharts.maps['custom/world']
my code is :
//gfx.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts'; import exporting from 'highcharts/modules/exporting.src'; import highmaps from 'highcharts/modules/map.src';
import { MapComponent } from './gfx.map.component'; import { GfxService } from './gfx.service';
export function highchartsModules() { // apply Highcharts Modules to this array return [ highmaps, exporting ]; }
/ declare var require : any; /
@NgModule({ declarations : [ MapComponent ], imports : [ CommonModule, ChartModule / ChartModule.forRoot(require('highcharts/highmaps')) / ], exports : [ MapComponent ], providers : [ GfxService, { provide: HIGHCHARTS_MODULES, useFactory: highchartsModules } ] }) export class GfxModule {}
//gfx.map.component.ts
import { Component, OnInit } from '@angular/core'; import { GfxService } from './gfx.service';
//We import Chart and MapChart import { Chart } from 'angular-highcharts'; import { MapChart } from 'angular-highcharts';
//sorry my file is very long so i show you just the essential of my porblem: { "allAreas": false, "zIndex":1, "name": "America", "color":"#9bc121", "joinBy": ["iso-a2", "code"], "mapData": Highcharts.maps['custom/world'], "data": [{ "drilldown":"US", "code": "US" }, { "drilldown":"MX", "code": "MX" }, { "drilldown":"AR", "code": "AR" }, { "drilldown":"BR", "code": "BR" }]
any suggestions please ? thanks in advance