Bubble Chart Series Data Error

[n8dogg2432]

I'm trying to reproduce the bubble chart demo in angular and have one error left to solve. Inside the series.data I get an error on any entry in the object except x and y. The error reads

Code: Select all

Type '{ x: number; y: number; z: number; name: string; country: string; }' is not assignable to type 'XrangePointOptionsObject'.
  Object literal may only specify known properties, and 'z' does not exist in type 'XrangePointOptionsObject'.

. I'm not sure why it would say z doesn't exist because I'm just creating it in the series.data right there. The code is below and I would greatly appreciate any insight.

Code: Select all

series: [{
        data: [
            { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
            { x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
            { x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
            { x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
            { x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
            { x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
            { x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
            { x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
            { x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
            { x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
            { x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
            { x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
            { x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
            { x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
            { x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
        ]
    }]

[n8dogg2432]

I thought it might have to do something with me not importing highcharts-more so I add this to the top but still received the same errors....

Code: Select all

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Planets } from '../planets';
import { apiCallService } from '../apicall.service';
import { Subscription } from 'rxjs';
import * as Highcharts from 'highcharts';
import * as HighchartsMore from 'highcharts-more';
HighchartsMore(Highcharts);

[n8dogg2432]

Here is the codesandbox link with the error reproduced. Hopefully I did that correctly And hopefully someone knows how to fix this.

https://codesandbox.io/s/vigilant-elion ... mponent.ts

[pawelys]

Hello, thanks for contacting us with your question! The issue is, that in the original highcharts interface there are some properties missing. Here is the demo where is shown, how to correctly extend typescript interfaces: https://github.com/highcharts/highchart ... r#demo-app

And here is the working demo with your example: https://codesandbox.io/s/staging-thunde ... mponent.ts Let me know, if that works for you! Kind regards,

[n8dogg2432]

You're awesome! Got it working and think I understand for future reference also. Thanks so much.

[pawelys]

Good to hear! In case of any further questions feel free to contact us again! Kind regards,