Bug: Tilemap not rendering with highcharts-angular and providePartialHighcharts

[Stephane-AmStrong]

Bug: Tilemap not rendering with highcharts-angular and providePartialHighcharts

Environment

• highcharts: [your version]
• highcharts-angular: [your version]
• Angular: [your version]
• TypeScript: [your version]

Issue

Tilemap charts configured with providePartialHighcharts are not rendering. Despite importing the tilemap module, we still get Highcharts error highcharts/highcharts#17.

Browser Console Error

line-chart.component.html:1 ERROR Error: Highcharts error highcharts/highcharts#17: www.highcharts.com/errors/17/?missingModuleFor=tilemap
 - missingModuleFor: tilemap
    at Object.<anonymous> (highcharts.js:9:138)
    at U (highcharts.js:9:2580)
    at C (highcharts.js:9:61)
    at a0.initSeries (highcharts.js:9:199588)
    at highcharts.js:9:215527
    at Array.forEach (<anonymous>)
    at a0.firstRender (highcharts.js:9:215505)
    at a0.<anonymous> (highcharts.js:9:199505)
    at U (highcharts.js:9:2580)
    at a0.init (highcharts.js:9:198727)
Promise.then		
SectionApplicationsComponent_For_2_Template	@	section-applications.component.html:5
Promise.then		
(anonymous)	@	main.ts:5

Configuration

Component setup:

import { Component, input } from '@angular/core';
import { ChartConstructorType, HighchartsChartComponent, providePartialHighcharts } from 'highcharts-angular';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'honeycomb-chart',
  providers: [
    providePartialHighcharts({
      modules: () => [
        import('highcharts/esm/modules/map'),
        import('highcharts/esm/modules/tilemap'),
      ],
    }),
  ],
})
export class HoneycombChartComponent {
  chartConfig = input.required<ChartConfig>();

  get chartOptions(): Highcharts.Options {
    return {
      chart: {
        type: 'tilemap',
        inverted: true,
        height: '80%'
      },
      title: {
        text: this.chartConfig().title,
      },
      xAxis: {
        visible: false,
      },
      yAxis: {
        visible: false,
      },
      colorAxis: {
        dataClasses: [
          {
            from: 0,
            to: 1000000,
            color: '#3b528b',
            name: '< 1M',
          },
          {
            from: 1000000,
            to: 5000000,
            color: '#21918c',
            name: '1M - 5M',
          },
          {
            from: 5000000,
            to: 20000000,
            color: '#5ec962',
            name: '5M - 20M',
          },
          {
            from: 20000000,
            color: '#fde725',
            name: '> 20M',
          },
        ],
      },
      legend: {
        enabled: false,
      },
      tooltip: {
        headerFormat: '',
        pointFormat: 'Population de <b>{point.name}</b>: <b>{point.value}</b>',
      },
      plotOptions: {
        tilemap: {
          tileShape: 'hexagon',
          dataLabels: {
            enabled: true,
            format: '{point.hc-a2}',
            style: {
              textOutline: 'none',
            },
          },
        },
      },
      series: [
        {
          type: 'tilemap',
          name: 'Population',
          data: this.getTilemapData(),
        },
      ],
    };
  }

  private getTilemapData(): any[] {
    return [
      { 'hc-a2': 'CA', name: 'California', x: 5, y: 2, value: 38965193 },
      { 'hc-a2': 'TX', name: 'Texas', x: 7, y: 4, value: 30503301 },
      { 'hc-a2': 'FL', name: 'Florida', x: 8, y: 8, value: 22610726 },
      { 'hc-a2': 'NY', name: 'New York', x: 2, y: 9, value: 19571216 },
      { 'hc-a2': 'IL', name: 'Illinois', x: 3, y: 6, value: 12882135 },
      { 'hc-a2': 'PA', name: 'Pennsylvania', x: 3, y: 8, value: 12801989 },
    ];
  }

  chartConstructor: ChartConstructorType = 'chart';
  updateFlag = false;
  oneToOneFlag = true;
}

Template:

<highcharts-chart
  [options]="chartOptions"
  [(update)]="updateFlag"
  [oneToOne]="oneToOneFlag"
  class="chart">
</highcharts-chart>

Expected Behavior

Tilemap chart renders with hexagonal tiles positioned according to x,y coordinates and colored by value.

Actual Behavior

• Highcharts error Pie chart with one single 100% point fails to show highcharts#17 thrown: "missingModuleFor=tilemap"
• Chart container appears but remains empty
• Error occurs despite explicit tilemap module import in providePartialHighcharts

Additional Notes

• SeriesTilemapOptions interface exists in highcharts.d.ts, indicating module should be available
• The error suggests the tilemap module is not being loaded properly by providePartialHighcharts
• Error originates from initSeries during chart rendering
• Same tilemap configuration works in vanilla JavaScript/HTML

Steps to Reproduce

1. Create Angular component with tilemap chart
2. Use providePartialHighcharts with tilemap module import
3. Configure tilemap options with type: 'tilemap'
4. Component throws Highcharts error Pie chart with one single 100% point fails to show highcharts#17 on render

Workaround Attempts

• Tried importing both map and tilemap modules
• Tested different module import paths (/esm/modules/ vs /modules/)
• Used different ChartConstructorType values
• All attempts result in the same error Pie chart with one single 100% point fails to show highcharts#17

Question

Is providePartialHighcharts properly loading the tilemap module, or is there a specific configuration required for tilemap charts that differs from other module imports?

[KacperMadej]

Hi @Stephane-AmStrong

Thank you for contacting us about the problem.
I have transferred your issue to the highcharts-angular repository.

I am unable to recreate the problem - adding PR as a live demo app: #416
Could you share your failing code as a live demo or modify my code in the PR above lined?

[medbenmakhlouf]

@KacperMadej @Stephane-AmStrong

Steps to Reproduce:

1. Add a chart that uses the tilemap series/component.
2. In the Angular template (.html), quickly comment and uncomment the chart block several times while the dev server is running.
3. At some point, the compiler complains with: Highcharts error #17: missingModuleFor=tilemap
4. What happens:
   • It looks like Angular CLI loads the component from its cache.
   • The Highcharts providers (modules) are not re-initialized in time.
   • The block still renders in the DOM, but the chart fails with the error.

Notes:

• The bug is a bit tricky to reproduce.
• Once the project is fully built and modules are properly initialized, this error does not appear.
• It mostly happens in development mode if you frequently change the config or toggle the component block in the template.

[KacperMadej]

In the Angular template (.html), quickly comment and uncomment the chart block several times while the dev server is running.

A workaround is to not do that. With more seriousness, it seems that you are describing a more general Angular issue related to how modules / components are loaded in the dev setup.

Once the project is fully built and modules are properly initialized, this error does not appear.

This makes this problem an edge case. If there is a way to recreate the problem in a more stable way, or if the build is affected, we should investigate this problem further to evaluate.

My initial thought is to add a notice or warning to the documentation (stating that in case of frequent toggle of this option, in dev mode, it might cause unstable loading of files that goes away on next build / update / reload) if more people are affected by this - for now this issue should be a good starting point to have a further conversation and gather more feeback.

[KacperMadej]

Until there is a stable way to recreate the problem, you could try a possible workaround (in case the other issue is the same as this one) - #417 (comment)

In short: force import order, e.g.

  providers: [
    providePartialHighcharts({
      modules: () => {
        return [
          import('highcharts/esm/modules/map').then(() => import('highcharts/esm/modules/tilemap'))
        ];
      },
    }),
  ],