Use variable radius from HighCharts

Question

I'm trying to use a variable radius pie : https://www.highcharts.com/demo/variable-radius-pie from HighCharts.

Please note that I'm using HighCharts via an angular module : angular-highcharts.

I'm working with Angular 8.

In ngOnInit() I fill my HighCharts object.

this.pie = new Chart({
      chart: {
        type: 'variablepie',
      },
      credits: {
        enabled: false
      },
      title: {
        text: 'Variable radius',
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      series: [{
        name: 'transactions',
        minPointSize: 10,
        zMin: 0,
        type: 'variablepie',
        innerSize: '50%',
        data: [
         {name: "Forwarding", y: 379, z: 379}
         {name: "Processing", y: 883, z: 883}
         {name: "Processed", y: 487, z: 487}
         {name: "Error", y: 986, z: 986}
         {name: "Incomes", y: 43, z: 43}
        ]
    }],
});

I also include in app.module.ts :

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as exporting from 'highcharts/modules/exporting.src';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    ChartModule
  ],
  providers: [
    ...
    { provide: HIGHCHARTS_MODULES, useFactory: () => [ more, exporting ]
    }
  ]
})

With this, I'm getting an error 17 into the console.

This tell me I have to import a script because variable radius pie need a specific script.

I saw on this post that I have to import this script : (<script src="https://code.highcharts.com/modules/variable-pie.js"></script>

I tried to put it in:

• index.html : It didn't work
• the file I'm using HighCharts : It didn't work

Just want to know if some of you found a solution for this ?

EDIT 1

I change my code like this. myModule.module.ts :

import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    HighchartsChartModule,
    ...
  ],
  schemas: [ NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA ]
})

myComponent.component.ts :

import * as Highcharts from 'highcharts';

 Highcharts: typeof Highcharts = Highcharts; // required
  chartOptions: Highcharts.Options = {
    series: [{
      data: [1, 2, 3],
      type: 'line'
    }]
 };

mycomponent.component.html :

<highcharts-chart style="width: 100%; display: block"
    [Highcharts]="Highcharts"
    [options]="chartOptions">
</highcharts-chart>

I'm getting this error : Can't bind to 'Highcharts' since it isn't a known property of 'highcharts-chart'.

Answer 1

Mate do this in your component.ts:

import * as Highcharts from 'highcharts';
import HPie from 'highcharts/modules/variable-pie';

HPie(Highcharts);

In the module u just import this:

...
import {HighchartsChartModule} from 'highcharts-angular';
...

@NgModule({
    imports: [
        ...
        HighchartsChartModule <--- Import HighchartsModule
        ...
    ],
    declarations: [
      ... <--- somewhere here the component in which u want to use the highcharts component
    ],
    exports: [],
    providers: []
})

In your component.ts:

export class ChartComponent implements OnInit, OnDestroy {

...
 // Chartstuff
    Highcharts = Highcharts;
    chart: Highcharts.Chart;
    updateFlag: boolean;
    chartOptions;

constructor() {}

ngOnInit() {
  this.initChart(data: any) <--- anyData from http call
}

initChart(yourData: any) {


this.chartOptions = {
    chart: {
    type: 'variablepie'
},
accessibility: {
    description: 'A variable radius pie chart'
},
title: {
    text: 'Countries compared by population density and total area.'
},
tooltip: {
    headerFormat: '',
    pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
        'Area (square km): <b>{point.y}</b><br/>' +
        'Population density (people per square km): <b>{point.z}</b><br/>'
},
series: [{
    minPointSize: 10,
    innerSize: '20%',
    zMin: 0,
    name: 'countries',
    data: [{
        name: 'Spain',
        y: 505370,
        z: 92.9
    }, {
        name: 'France',
        y: 551500,
        z: 118.7
    }, {
        name: 'Poland',
        y: 312685,
        z: 124.6
    }, {
        name: 'Czech Republic',
        y: 78867,
        z: 137.5
    }, {
        name: 'Italy',
        y: 301340,
        z: 201.8
    }, {
        name: 'Switzerland',
        y: 41277,
        z: 214.5
    }, {
        name: 'Germany',
        y: 357022,
        z: 235.6
    }]
}]
  }
            ...
}

And in ur component.html file use their highcharts-chart component:

<highcharts-chart style="width: 100%; display: block" [Highcharts]="Highcharts"     
    [options]="chartOptions" [runOutsideAngular]="true" [oneToOne]="true"
    (chartInstance)="logChartInstance($event)">

This works fine for me in order to import the needed functionality. See the full documentation here: highcharts-angular-docs

And for loading modules and plugins go here: highcharts-angular-modules

EDIT:

Here is a working example with angular on stackblitz: variable-pie-angular-example

regards