Setting up Highcharts version 7 heatmaps with npm in an Angular 6 environment

I am currently having an issue with initializing the heatmap lib in Highcharts 7.0.1 within my Angular 6 app via npm. Despite successfully running basic charts like line, spline, bar, etc., when following the documentation for the heatmap initialization, I encounter the error below:

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'.

I have attempted to resolve this by following a suggestion from a Highcharts support thread (https://www.highcharts.com/forum/viewtopic.php?t=35781), but unfortunately, it did not fix the error.

To simplify troubleshooting, I have removed other charts to reduce distractions. Any assistance or guidance on this matter would be 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'
          }
      }]
    });
  }

}
javascriptnpmhighchartsangular6

Answer №1

Specify the chart type required in the series:

{
      chart: {
          marginTop: 40,
          marginBottom: 80,
          plotBorderWidth: 1
      },
      title: {
          text: 'Sales data per employee by 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 data 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'
          }
      }]
    });
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

We apologize for the inconvenience, but please address the upstream dependency conflict before proceeding. You may also choose to use the --force or --legacy-peer

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="532b3e2a2c3bf48d454345584b4348454242404443472c525e7d1d010f13270">[email prote ...

javascriptreactjsreact-nativenpmdependencies

Experiencing the issue of receiving `undefined` when trying to access res.query with a JSON query string using

Utilizing qs for constructing JSON-based query parameters for my REST API request: On the client side: import qs from "qs"; let query = { dateTime: { $gte: 1664557995000 } }; let q = qs.stringify(query); let url = "http://lo ...

javascriptnode.jsrestquery-stringqs

exploring alternatives to ng-container in angular-4.x for selecting elements

Currently in my Angular 4.x project, I have a component using the Selector 'abc' as shown below: @Component({ selector: "Abc", templateUrl: "Abc.html", styleUrls: [ "Abc.css" ] }) However, the "Abc" tag is also present in the DOM, b ...

javascriptangularng-templateng-container

Show a table with rows that display an array from a JSON object using JavaScript

My current code includes JSON data that I need to display in table rows, but I'm struggling to understand how to do so effectively. The output I am currently seeing is all the rows from the array stacked in one row instead of five separate rows as in ...

javascripthtmljson

Encountering an error when accessing dynamically routed pages in Next JS

When I click on a link within the web app to navigate to a dynamically routed page for a product (http://localhost/1), everything works as intended. However, if I manually input a specific product number in the search bar to navigate directly to that page ...

javascriptnext.js

Load content within the DIV container

I need help finding code that can use JQuery to load a page into a DIV element. Essentially, I want to load displaycatch.php into a specific DIV <div id="results">Content for id "results" Goes Here</div> Furthermore, I would like to add a ...

javascriptjqueryajax

Obtaining the TCP Socket ID Upon Establishing Connection with the Server

One question I have is, How can I retrieve the TCP Socket Id when it's connected to the server? Here's the code snippet I am working with: const net = require('net'); const server = net.createServer(); server.listen(port, host, async( ...

node.jssocketsnpmtcptcpsocket

Guide to extracting the values associated with a specific key across all elements within an array of objects

My goal is to retrieve the values from the products collection by accessing cart.item for each index in order to obtain the current price of the product. const CartSchema = mongoose.Schema({ userId: { type: mongoose.Schema.Types.ObjectId, ...

javascriptnode.jsmongodbexpressmongoose

Is your Cloud Functions task generating an Array when querying?

To access items and products in my database, I need to retrieve the "ean" field from the product and check if it matches the one in the request body. The structure of my database is as follows: "cart": { "items": { "0": {info here}, "1": {info ...

javascriptfirebase-realtime-databasegoogle-cloud-functions

Is there a way to connect and interact with a different ng-controller's ng-model within a separate ng-controller?

Is it possible to access the ng-model from another ng-controller and if so, how can it be done? In this scenario, I am using two controllers. The first controller has a model called mddl1, while the second controller does not have any other model. However, ...

javascriptangularjs

Perform a single click and a double click on an anchor element in the document

I am attempting to implement two actions when a user clicks on an anchor tag. The anchor tag will contain a video link. My goal is for the URL to open in a new window when the user single-clicks on the anchor tag, and for the use of the HTML5 download attr ...

javascriptjqueryhtml

Comparing XDomainRequest and XMLHTTPRequest - which one to choose

Our team is currently developing an application utilizing PixiJS that integrates a dynamic json loader. The .json files are loaded using the following logic: if(window.XDomainRequest) { this.ajaxRequest = new window.XDomainRequest(); } else if (windo ...

javascriptajaxinternet-explorerwindows-phonepixi.js

Navigate a JSON object using JavaScript

As I continue to juggle learning code with my job, I am diving into the world of creating charts using AMcharts. My goal is to generate multiple data sets based on orientation and potentially expand further in the future. In the JSON snippet below, you can ...

javascriptarraysjsonamcharts

How can I locate a single hidden field within a div containing multiple fields?

Within one div, I have three hidden fields. How can I access and retrieve just one of these hidden fields when referencing this specific div? ...

javascriptjquery

How can I pre-fill an AutoModelSelect2Field with static information in Django using the django-select2 library?

I am currently using a field similar to the one below: class ContactSelect(AutoModelSelect2Field): queryset = Contact.objects.all() search_fields = ['name__contains'] to_field = 'name' widget = AutoHeavySelect2Widget W ...

javascriptajaxdjangojsonjquery-select2

Share an entire /folder through an express server

I am currently working on an express server setup, and I am looking to streamline my route handling for managing an entire directory structure. root /html /css /js /app.js /images /index.html /some-other.htm ...

javascriptnode.jsexpress

Tooltips will display on all Nivo charts except for the Nivo Line chart

I'm having an issue with nivo charts where the tooltip isn't showing up for my line chart. Even after copying and pasting the example from here: Other chart examples work fine with tooltips appearing, but for some reason, it's just not work ...

javascriptreactjs

Connecting Angular modules via npm link is a great way to share common

Creating a project with a shared module that contains generic elements and components, such as a header, is my goal. This shared module will eventually be added as a dependency in package.json and installed through Nexus. However, during the development ph ...

angulartypescriptnpm

Is it possible to utilize the @next/env package within the next.config.js file?

I'm looking to access the environment configuration from next.config.js in order to utilize some environment variables specified in .env.local and establish server runtime configurations based on them. Is it appropriate to use next.config.js for this ...

javascriptnext.js

Leveraging HTTP/2 in conjunction with angularJS

As I was exploring ways to improve the performance of my web application, I came across HTTP/2. After learning about its features that can enhance website speed, I decided to implement it. Upon upgrading my browser to the latest version to enable HTTP/2 s ...

javascriptangularjshttp2web-performance