For an Angular project, I'm trying to do something similar to the "Animated lines on a world map" example posted here: https://www.highcharts.com/demo/maps/animated-mapline. Unfortunately, I get many errors when I try to reproduce the map in Angular.
I have these versions installed:
Code: Select all
"@angular/core": "14.2.12",
"highcharts": "~10.3.3",
"highcharts-angular": "~3.0.0",
"@highcharts/map-collection": "~2.0.1",Code: Select all
<highcharts-chart id="container" [Highcharts]="Highcharts" [constructorType]="chartConstructor" [options]="chartOptions"
style="width: 100%; height: 400px; display: block;">
</highcharts-chart>
This is my Typescript code:
Code: Select all
import { Component, OnInit, Input } from '@angular/core';
import * as Highcharts from 'highcharts';
import HC_map from 'highcharts/modules/map';
HC_map(Highcharts);
import worldMap from "@highcharts/map-collection/custom/world.topo.json";
@Component({
selector: 'app-gas-flow-map',
templateUrl: './gas-flow-map.component.html',
styleUrls: ['./gas-flow-map.component.scss']
})
export class GasFlowMapComponent implements OnInit {
Highcharts: typeof Highcharts = Highcharts;
chartConstructor = "mapChart";
data = [
{
'hc-key': 'ye',
color: '#ffa500',
info: 'Yemen is where coffee took off.'
},
{
'hc-key': 'br',
color: '#c0ffd5',
info: 'Coffee came from La Reunion.'
},
{
'hc-key': 'fr',
color: '#c0ffd5',
info: 'Coffee came from Java.'
},
{
'hc-key': 'gb',
color: '#c0ffd5',
info: 'Coffee came from Java.'
},
{
'hc-key': 'id',
color: '#c0ffd5',
info: 'Coffee came from Yemen.'
},
{
'hc-key': 'nl',
color: '#c0ffd5',
info: 'Coffee came from Java.'
},
{
'hc-key': 'gu',
color: '#c0ffd5',
info: 'Coffee came from France.'
},
{
'hc-key': 're',
color: '#c0ffd5',
info: 'Coffee came from Yemen.'
},
{
'hc-key': 'in',
color: '#c0ffd5',
info: 'Coffee came from Yemen.'
}
];
chartOptions: Highcharts.Options = {
chart: {
map: worldMap
},
title: {
text: 'The history of the coffee bean ☕'
},
legend: {
enabled: false
},
tooltip: {
useHTML: true,
headerFormat: '<b>{point.key}</b>:<br/>',
pointFormat: '{point.info}'
},
mapView: {
fitToGeometry: {
type: 'MultiPoint',
coordinates: [
// Alaska west
[-164, 54],
// Greenland north
[-35, 84],
// New Zealand east
[179, -38],
// Chile south
[-68, -55]
]
}
},
series: [
{
data: this.data,
keys: ['hc-key', 'color', 'info'],
name: 'Coffee',
states: {
hover: {
color: '#a4edba'
}
}
},
{
type: 'mapline',
data: [
{
geometry: {
type: 'LineString',
coordinates: [
[48.516388, 15.552727], // Yemen
[110.004444, -7.491667] // Java
]
},
className: 'animated-line',
color: '#666'
},
{
geometry: {
type: 'LineString',
coordinates: [
[48.516388, 15.552727], // Yemen
[55.5325, -21.114444] // La reunion
]
},
className: 'animated-line',
color: '#666'
},
{
geometry: {
type: 'LineString',
coordinates: [
[55.5325, -21.114444], // La reunion
[-43.2, -22.9] // Brazil
]
},
className: 'animated-line',
color: '#666'
},
{
geometry: {
type: 'LineString',
coordinates: [
[48.516388, 15.552727], // Yemen
[78, 21] // India
]
},
className: 'animated-line',
color: '#666'
},
{
geometry: {
type: 'LineString',
coordinates: [
[110.004444, -7.491667], // Java
[4.9, 52.366667] // Amsterdam
]
},
className: 'animated-line',
color: '#666'
},
{
geometry: {
type: 'LineString',
coordinates: [
[-3, 55], // UK
[-61.030556, 14.681944] // Antilles
]
},
className: 'animated-line',
color: '#666'
},
{
geometry: {
type: 'LineString',
coordinates: [
[2.352222, 48.856613], // Paris
[-53, 4] // Guyane
]
},
className: 'animated-line',
color: '#666'
}
],
lineWidth: 2,
enableMouseTracking: false
},
{
type: 'mappoint',
color: '#333',
dataLabels: {
format: '<b>{point.name}</b><br><span style="font-weight: normal; opacity: 0.5">{point.custom.arrival}</span>',
align: 'left',
verticalAlign: 'middle'
},
data: [
{
name: 'Yemen',
geometry: {
type: 'Point',
coordinates: [48.516388, 15.552727] // Yemen
},
custom: {
arrival: 1414
},
dataLabels: {
align: 'right'
}
},
{
name: 'Java',
geometry: {
type: 'Point',
coordinates: [110.004444, -7.491667] // Java
},
custom: {
arrival: 1696
}
},
{
name: 'La Reunion',
geometry: {
type: 'Point',
coordinates: [55.5325, -21.114444] // La reunion
},
custom: {
arrival: 1708
}
},
{
name: 'Brazil',
geometry: {
type: 'Point',
coordinates: [-43.2, -22.9] // Brazil
},
custom: {
arrival: 1770
},
dataLabels: {
align: 'right'
}
},
{
name: 'India',
geometry: {
type: 'Point',
coordinates: [78, 21] // India
},
custom: {
arrival: 1670
}
},
{
name: 'Amsterdam',
geometry: {
type: 'Point',
coordinates: [4.9, 52.366667] // Amsterdam
},
custom: {
arrival: 1696
}
},
{
name: 'Antilles',
geometry: {
type: 'Point',
coordinates: [-61.030556, 14.681944] // Antilles
},
custom: {
arrival: 1714
},
dataLabels: {
align: 'right'
}
},
{
name: 'Guyane',
geometry: {
type: 'Point',
coordinates: [-53, 4] // Guyane
},
custom: {
arrival: 1714
},
dataLabels: {
align: 'right'
}
}
],
enableMouseTracking: false
}
]
}
ngOnInit() {
}
}
This leads to the following errors. They repeat for every occurrence in the options, here is a list of the unique errors I encounter:
Code: Select all
Property 'type' is missing in type '{ data: { 'hc-key': string; color: string; info: string; }[]; keys: string[]; name: string; states: { hover: { color: string; }; }; }' but required in type 'SeriesXrangeOptions'.
Type '{ geometry: { type: "LineString"; coordinates: number[][]; }; className: string; color: string; }' is not assignable to type 'number | [string, number | null] | SeriesMaplineDataOptions | null'.
Object literal may only specify known properties, and 'className' does not exist in type '[string, number | null] | SeriesMaplineDataOptions'.
124 className: 'animated-line'
Type '{ name: string; geometry: { type: "Point"; coordinates: number[]; }; custom: { arrival: number; }; dataLabels: { align: "right"; }; }' is not assignable to type 'number | [number, number | null] | SeriesMappointDataOptions | null'.
Object literal may only specify known properties, and 'custom' does not exist in type '[number, number | null] | SeriesMappointDataOptions'.
212 custom: {
~~~~~~~~~
213 arrival: 1414
~~~~~~~~~~~~~~~~~~~~~~~~~~~
214 },
Thanks for any replies in advance and greetings from the Azores,
Nik
