CODEWITHSUNDEEP
angularhighcharts
ps0604
ps0604

Reputation: 1071

US Counties map in Highmaps for Angular throws compilation error

I'm trying to deploy US Counties map in Highmaps using the highcharts-chart directive. This works fine with the US States map, but have a problem defining the data element for US Counties as I get a compilation error.

This is the attempt:

HTML

    <highcharts-chart 
        [Highcharts]="Highcharts"
        [constructorType]="'mapChart'"
        [options]="chartMap"
        [(update)]="updateFlag"
        [oneToOne]="true"
        style="width: 500px; height: 400px; display: block;"
    ></highcharts-chart>

Typescript

import * as Highcharts from 'highcharts';
import MapModule from 'highcharts/modules/map';
const mapX = require('@highcharts/map-collection/countries/us/us-all-all.geo.json')
MapModule(Highcharts);

.....
.....
this.chartMap = {
                chart: {
                    map: mapX
                },
                title: {
                    text: 'THIS IS THE US COUNTIES MAP'
                },
                series: [{ // <-- error is thrown here
                    name: 'Unemployment',
                    borderWidth: 0.5,
                    states: {
                        hover: {
                        color: 'red'
                        }
                    },
                    joinBy: ['hc-key', 'code'],
                    data:  [  
                        {
                            "code": "us-al-001",
                            "name": "Autauga County, AL",
                            "value": 3.9
                        },
                        {
                            "code": "us-al-003",
                            "name": "Baldwin County, AL",
                            "value": 4.3
                        }
                    ]
                    }]
            };

I get the following compilation error:

Type '{ name: string; borderWidth: number; states: { hover: { color: string; }; }; joinBy: string[]; data: { "code": string; "name": string; "value": number; }[]; }' is not assignable to type 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions | SeriesArearangeOptions | SeriesAreasplineOptions | SeriesAreasplinerangeOptions | ... 82 more ... | SeriesZigzagOptions'. Property 'type' is missing in type '{ name: string; borderWidth: number; states: { hover: { color: string; }; }; joinBy: string[]; data: { "code": string; "name": string; "value": number; }[]; }' but required in type 'SeriesXrangeOptions'.ts(2322) highcharts.d.ts(335083, 5): 'type' is declared here.

I took the data example from here and the map example from here.

What is this error and how to fix it?

Upvotes: 0

Views: 475

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

This error occurs because you haven't set the series type which is required for each series when using TypeScript.

series: [{
  name: 'Unemployment',
  type: 'map', // type is required for each series
  borderWidth: 0.5,
  states: {
    hover: {
      color: 'red'
    }
  },
  joinBy: ['hc-key', 'code'],
  data: [{
      "code": "us-al-001",
      "name": "Autauga County, AL",
      "value": 3.9
    },
    {
      "code": "us-al-003",
      "name": "Baldwin County, AL",
      "value": 4.3
    }
  ]
}]

More information about this issue:

Upvotes: 2

Related Questions