angularhighchartsangular2-highcharts

Highcharts Variablepie with Angular

I am currently working on an ASP.NET application with an Angular frontend written in TypeScript.

I am looking to create a variablepie chart using Variablepie Highcharts but I am having issues displaying it.

I followed this tutorial in combination with the template given on the Highchart website for the variablepie.

The first issue I am encountering is an error where TypescriptComplains about the Serries options provided on the highcharts website.

Highcharts.chart('container', {
  chart: {
    type: 'variablepie'
  },
  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/>'
  },
  plotOptions: {
    variablepie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      }
    }
  },
  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: 'Germany',
      y: 357022,
      z: 235.6
    }]
  }]
});

VisualStudio complains that it is missing a type attribute in the serries object so I added one with the value 'variablepie'. When the component loads, the chart does not seem to display. The strange thing is that if instead, I put 'pie' for the attribute type in the serries object, a pie chart appears correctly? (But I need the variable pie chart) Would anyone know the issue here?

Here is the fuss code for my Angular component:

import { Component, Inject, AfterViewInit} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { error } from 'protractor';
import { ActivatedRoute } from "@angular/router";
import { Chart } from 'angular-highcharts';
import { SeriesVariablepieOptions, SeriesVariablepieDataOptions } from 'highcharts';

@Component({
  selector: 'app-grades-component',
  templateUrl: './grades.component.html'
})
export class GradesComponent implements AfterViewInit {
  public http: HttpClient;
  public baseUrl: string;
  public courseCode: string;
  chart: Chart;

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string, route: ActivatedRoute) {
    this.http = http;
    this.baseUrl = baseUrl;
    this.courseCode = route.snapshot.paramMap.get('courseCode');
    console.log("Checking grades for " + this.courseCode);
  }

  ngAfterViewInit() {
    this.initChart();
  }

  public initChart() {

    console.log("Initializing chart");

    this.chart = new Chart({
      chart: {
        type: 'variablepie'
      },
      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: [{
        type: "variablepie",
        minPointSize: 10,
        innerSize: '20%',
        zMin: 0,
        name: 'countries',
        data: [{
          name: 'Spain',
          y: 505370,
          z: 92.9
        }, {
          name: 'Germany',
          y: 357022,
            z: 235.6
          }] as SeriesVariablepieDataOptions
      }]
    });


    console.log("Initializing chart DONE");
  }

}
Solution

  • Variablepie series requires an additional module to be loaded. You should add this piece of code to your component:

    // import the module
import * as Variablepie from "highcharts/modules/variable-pie";

// initialize the module
Variablepie(Highcharts);

    Demo:

    API reference: