Search code examples
angularhighchartsangular-highcharts

Highcharts map doesn't show all areas simultaneously

Im working on this issue for a few hours right now, for some reason highcharts map is unable to show all areas in the same time, and shows me only the last selected one. A few pictures for example: enter image description here

enter image description here

enter image description here

here is the chartOptions:

chartOptions: Highcharts.Options = {
    chart: {
      type: 'map',
      map: usAll,
      height: 345,
    },
    legend: {
      enabled: true,
    },
    colors: ['#D9ECFD', '#1089F3', '#0060C4'],
    plotOptions: {
      map: {
        borderColor: 'var(--gray-300)',
        dataLabels: {
          enabled: true,
          format: '{point.properties.postal-code}',
          style: {
            color: 'var(--gray-300)',
            textOutline: 'none',
          },
        },
      },
    },
  }

the the series data is:

[
{
    "name": "medium",
    "data": [
        [
            "us-ca",
            5418
        ],
        [
            "us-fl",
            3555
        ],
        [
            "us-ma",
            5148
        ],
        [
            "us-md",
            5552
        ],
        [
            "us-oh",
            4236
        ]
    ]
},
{
    "name": "high",
    "data": [
        [
            "us-nj",
            15057
        ],
        [
            "us-pa",
            8272
        ],
        [
            "us-tn",
            6086
        ]
    ]
},
{
    "name": "low",
    "data": [
        [
            "us-ny",
            1585
        ],
        [
            "us-tx",
            2528
        ]
    ]
}
]

anybody knows what is the reason of this issue? maybe its a bug with the highcharts version? those are the highcharts versions from the package.json;

"highcharts": "^9.1.2",
"highcharts-angular": "^2.9.0",
"@highcharts/map-collection": "^2.0.1",

Thanks for you help.

Solution

  • This behavior occurs because each of the series shows all areas of the map. In practice, it means that they cover each other. To avoid this situation you need to create a dummy series with the activated allAreas option and with disabled for the rest of the series.

    {
    allAreas: true,    
    showInLegend: false
  },

    Demo: https://jsfiddle.net/BlackLabel/x3jyuL2n/

    API Reference: https://api.highcharts.com/highmaps/series.map.allAreas