I'm discovering Highcharts / Highmaps and for now, I would like to reproduce some demo examples on my machine using Angular 6, but I can't make it work.
The official JS example is here : https://www.highcharts.com/maps/demo/map-drilldown (you can see the code by clicking "Edit in CodePen")
I've tried to adapt the example like this :
import { Component, OnInit } from '@angular/core';
import { Highcharts, MapChart } from 'angular-highcharts';
require('highcharts/modules/map')(Highcharts);
@Component({
selector: 'app-demo-map-drilldown',
templateUrl: './demo-map-drilldown.component.html',
styleUrls: ['./demo-map-drilldown.component.css']
})
export class DemoMapDrilldownComponent implements OnInit {
private chart: MapChart;
constructor(private httpClient: HttpClient) { }
ngOnInit() {
let data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']);
let separators = Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline');
// Set drilldown pointers
data.forEach((element, i) => {
element.drilldown = element.properties['hc-key'];
element.value = i; // Non-random bogus data
});
// Instantiate the map
Highcharts.mapChart('container', {
chart: {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
let chart = this;
let mapKey = 'countries/us/' + e.point.drilldown + '-all';
// Handle error, the timeout is cleared on success
let fail = setTimeout(function () {
if (!Highcharts.maps[mapKey]) {
chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
fail = setTimeout(function () {
chart.hideLoading();
}, 1000);
}
}, 3000);
// Show the spinner
chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
//data = Highcharts.geojson(Highcharts.maps[mapKey]);
data = Highcharts.maps[mapKey];
// Set a non-random bogus value
data.forEach((element, i) => {
element.value = i; // Non-random bogus data
});
// Hide loading and add series
chart.hideLoading();
clearTimeout(fail);
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
}
this.setTitle(null, { text: e.point.name });
},
drillup: function () {
this.setTitle(null, { text: '' });
}
}
},
title: {
text: 'Highcharts Map Drilldown'
},
subtitle: {
text: '',
floating: true,
align: 'right',
y: 50,
style: {
fontSize: '16px'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#005645'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
series: [{
data: data,
name: 'USA',
dataLabels: {
enabled: true,
format: '{point.properties.postal-code}'
}
}, {
type: 'mapline',
data: separators,
color: 'silver',
enableMouseTracking: false,
animation: {
duration: 500
}
}],
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
}
}
But no luck so far. Here I get the error geojson is undefined and my editor (Visual Studio Code) underlines all my calls to Highcharts (.geojson, .maps, .mapChart).
My app.module.ts file looks like this :
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as exporting from 'highcharts/modules/exporting.src';
import * as highstock from 'highcharts/modules/stock.src';
import * as highmaps from 'highcharts/modules/map.src';
import * as drilldown from 'highcharts/modules/drilldown.src';
import * as data from 'highcharts/modules/data.src';
import * as exportdata from 'highcharts/modules/export-data.src';
import * as offline from 'highcharts/modules/offline-exporting.src';
import { AppComponent } from './app.component';
import { DemoMapDrilldownComponent } from './demo-map-drilldown/demo-map-drilldown.component';
@NgModule({
declarations: [
AppComponent,
DemoMapDrilldownComponent,
],
imports: [
BrowserModule,
ChartModule,
],
providers: [
{
provide: HIGHCHARTS_MODULES,
useFactory: () => [more, exporting, highstock, highmaps, drilldown, data, exportdata, offline]
}, // add as factory to your providers
],
bootstrap: [AppComponent]
})
export class AppModule { }
As you can see, I've tried importing various modules from inside Highcharts (based on several tutorials), but with no improvement...
I feel completely lost about Highcharts. Obviously something is wrong in my setup and/or in my use of this framework, but the documentation is not helpful at all and I couldn't find any complete, detailed Angular tutorial.
Can somebody help me at least to run this official example in an Angular app ?
UPDATE : Thanks to @daniel_s, I'm now using the official wrapper highcharts-angular and got rid of the editor errors.
I ran npm install highcharts-angular --save then npm install highcharts --save in the console in a new project.
You can see the project here : https://codesandbox.io/s/38o5n9qor1 (I added highcharts-angular, highcharts and highcharts-map as dependencies in the sandbox) In the console, we get the error :
ERROR TypeError: "a is undefined"
geojson https://38o5n9qor1.codesandbox.io/node_modules/highcharts/highmaps.js:435:407
ngAfterViewInit https://38o5n9qor1.codesandbox.io/src/app/official-example/official-example.component.ts:18:20
Can you check and help me correct my code ?
