cebor / angular-highcharts

Highcharts directive for Angular
MIT License
214 stars 63 forks source link

How can i use Highcharts.maps['custom/world'] #104

Open RAFBOUK opened 6 years ago

RAFBOUK commented 6 years ago

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

marinmarina commented 6 years ago

Hey , did you find the solution? I have the same problem .