Initialising npm Highcharts 7 heatmaps in Angular 6

Question

I have Highcharts 7.0.1 installed in my Angular 6 app via npm and already have a lot of basic charts running (line, spline, bar, etc). When trying to follow the Highcharts docs on initialising the heatmap lib, I get the following error set:

ERROR in src/app/modal-chart.service.ts(224,69): error TS2345: Argument of type '{ chart: { type: "heatmap"; marginTop: number; marginBottom: number; plotBorderWidth: number; }; ...' is not assignable to parameter of type 'Options'.
  Types of property 'series' are incompatible.
    Type '{ name: string; borderWidth: number; data: [number, number, number][]; dataLabels: { enabled: tru...' is not assignable to type '(SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions |...'.
      Type '{ name: string; borderWidth: number; data: [number, number, number][]; dataLabels: { enabled: tru...' is not assignable to type 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions | ...'.
        Type '{ name: string; borderWidth: number; data: [number, number, number][]; dataLabels: { enabled: tru...' is not assignable to type 'SeriesZigzagOptions'.
          Property 'type' is missing in type '{ name: string; borderWidth: number; data: [number, number, number][]; dataLabels: { enabled: tru...'.
src/app/modal-chart.service.ts(256,48): error TS2339: Property 'categories' does not exist on type 'Axis'.
src/app/modal-chart.service.ts(257,30): error TS2339: Property 'value' does not exist on type 'Point'.
src/app/modal-chart.service.ts(257,82): error TS2339: Property 'categories' does not exist on type 'Axis'.

Ive tried the solution from a highcharts support thread - https://www.highcharts.com/forum/viewtopic.php?t=35781

but this produces the same error.

Ive removed other charts to reduce the noise. Any and all help is greatly appreciated

import { Injectable } from '@angular/core';
import { DataApiService } from './data-api.service';
import * as Highcharts from 'highcharts';
import { MetricFilter } from "./models/metricFilter.model";
import Heatmap from 'highcharts/modules/heatmap.js';
Heatmap(Highcharts);

declare let $:any;

@Injectable({
  providedIn: 'root'
})
export class ModalChartService {

    charts = new Array(); //rendered charts
    chartsData; //use to reload original chart data
    chartBaseName = "chart-id";
    currentMetric;
  modalContentElement = "#modal-launch .overlay-content";

  constructor(private dataApiService : DataApiService) { }

  /**
  * Load charts from metric payload
  *
  * @param      {Object} metric metric payload
  */
  loadCharts (metric, filter = new MetricFilter) {
    let _self = this;

    _self.currentMetric = metric;

    //get chart data with metric ID
        _self.dataApiService.getCharts(metric.metricId, filter)
            .subscribe( payload => {
                _self.chartsData = payload.charts;

            $(_self.modalContentElement).html('');              

                $.each(_self.chartsData, function(index, chart){

                    switch(chart.chartType) {
                        case 'double':
                            _self.charts.push(_self.createDoubleChart(chart));
                            break;
            case 'heat-map':
              _self.charts.push(_self.createHeatMapChart(chart));
              break;
            case 'horizontal-bar':
              _self.charts.push(_self.createHorizontalBarChart(chart));
              break;
                        case 'line':
                            _self.charts.push(_self.createLineChart(chart));
                            break;
            case 'spline':
              _self.charts.push(_self.createSplineChart(chart));
              break;
            case 'tabular':
              _self.charts.push(_self.createTabularChart(chart));
              break;
                        case 'vertical-bar':
                            _self.charts.push(_self.createVerticalBarChart(chart));
                            break;
                    }

                });

            $('.highcharts-xaxis-grid path:last').remove();     
            $('#modal-launch').modal('show');
            }, error => {
                console.error(error);
            });
  }

  /**
  * Build and display Highcharts chart from payload data
  *
  * @param    {Object} metric metric payload
  * @return    {Object} highcharts highcharts object
  */
  private createHeatMapChart(chart){
    $(this.modalContentElement).append("<div id='" + this.chartBaseName + chart.chartId + "' class='chart-heat-map chart'></div>");

    return new Highcharts.Chart(this.chartBaseName + chart.chartId, {
      chart: {
          type: 'heatmap',
          marginTop: 40,
          marginBottom: 80,
          plotBorderWidth: 1
      },
      title: {
          text: 'Sales per employee per weekday'
      },
      xAxis: {
          categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
      },
      yAxis: {
          categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
          title: null
      },
      colorAxis: {
          min: 0,
          minColor: '#FFFFFF',
          maxColor: Highcharts.getOptions().colors[0]
      },
      legend: {
          align: 'right',
          layout: 'vertical',
          margin: 0,
          verticalAlign: 'top',
          y: 25,
          symbolHeight: 280
      },
      tooltip: {
          formatter: function () {
              return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                  this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
          }
      },
      series: [{
          name: 'Sales per employee',
          borderWidth: 1,
          data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
          dataLabels: {
              enabled: true,
              color: '#000000'
          }
      }]
    });
  }

}

Answer 1

Chart Type needed to be defined in the series:

{
      chart: {
          marginTop: 40,
          marginBottom: 80,
          plotBorderWidth: 1
      },
      title: {
          text: 'Sales per employee per weekday'
      },
      xAxis: {
          categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
      },
      yAxis: {
          categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
          title: null
      },
      colorAxis: {
          min: 0,
          minColor: '#FFFFFF',
          maxColor: Highcharts.getOptions().colors[0]
      },
      legend: {
          align: 'right',
          layout: 'vertical',
          margin: 0,
          verticalAlign: 'top',
          y: 25,
          symbolHeight: 280
      },
      tooltip: {
          formatter: function () {
              return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                  this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
          }
      },
      series: [{
          type: 'heatmap',
          name: 'Sales per employee',
          borderWidth: 1,
          data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
          dataLabels: {
              enabled: true,
              color: '#000000'
          }
      }]
    });
  }