1
votes

I have this problem when zoom with wheel mouse. The map is showing properly. But when I try to zoom in or zoom out, it shows the map more bright or less bright instead of zoom.

I'm using

"@angular/core": "~7.2.3",

"@types/highcharts": "^5.0.36",

"highcharts": "^7.0.2",

"highcharts-angular": "^2.4.0"

I've tried downgrading the versions, with same results.

These are the map options:

const mapWorld = require('@highcharts/map-collection/custom/world.geo.json');

    this.dataSize = {
      width: 450,
      height: 280
    };

this.chartMap = {
      chart: {
        map: mapWorld,
        height: this.dataSize.height,
        width: this.dataSize.width
      },
      credits: {
        enabled: false
      },
      title: {
        style: {
          'text-transform': 'uppercase',
          'font-family': '"Roboto", sans-serif',
          'font-size': '20px',
          'font-weight': 'bold'
        },
        align: 'left',
        text: this.translate.instant(this.title)
      },
      tooltip: {
          headerFormat: ''
      },
      legend: {
        enabled: false
      },
      xAxis: {
        minRange: 0.1
      },
      mapNavigation: {
        enabled: true,
        enableButtons: false,
        enableMouseWheelZoom: true,
        enableDoubleClickZoom: false
      },
      colorAxis: {
          min: 0,
          minColor: '#43aa98',
          maxColor: '#43aa98'
      },
      series: [{
        states: {
          hover: {
            color: '#008a73'
          }
        },
        animation: true,
        dataLabels: {
          enabled: false
        },
        allAreas: true,
        data: this.mapData
      } as Highcharts.SeriesMapOptions]
    };

in HTML

highcharts-chart [Highcharts]="Highcharts" [constructorType]="'mapChart'" [options]="chartMap"

I don't know what is happening. Some ideas?

Thanks!

1
Could you check it on this demo: stackblitz.com/edit/angular-ryrnyx? It works correctly. - Wojciech Chmiel

1 Answers

0
votes

Finally the issue was that I did declare de Highchart as chart instead of chartMap into a function that I wrote to made a resize automatically.

A work mate find the line.

Thanks to all to read anyways.