Problems with rendering of highmaps map

[beelio]

Expected behaviour

Map should render when pressing button

Actual behaviour

Map does not render, colorAxis renders though

Live demo with steps to reproduce

The jsfiddle that is part of the documentation for highmaps suffer from the problem.

Try to add series with the button.

The map renders most of the time, but try to refresh the page/close tab and visit page again/visit in private and try to add the series with the button, and some of the times the map don't render.

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/members/chart-addseries/

Affected browser(s)

chrome, ff on macOS

---

I've have had some problems with the highmaps library since a while back. I got reports from users that a map displaying statistics was not rendering sometimes.

When looking at the problem, I noticed that the map rendered quite inconsistently, sometimes perfect, but quite often - not at all.

When consulting the documentation at jsfiddle, I realised that the example there suffers from the exact same problem. Sometimes the map simply does not render. I made a screen recording to show the problem.

This problem occurs in chrome and ff, I have not tried other browsers.

This is my code for the map, it's a part of a Angular app.

  function createChart() {
    chart = new Highcharts.Map({
      chart: {
        renderTo: 'mapContainer'
      },
      title: {
        text: '',
      },
      credits: {
        enabled: false
      },
      legend: {
        layout: 'horizontal',
        borderWidth: 0,
        backgroundColor: 'rgba(255,255,255,0.85)',
        floating: false,
        verticalAlign: 'bottom',
        horizontalAlign: 'center',
      },
      colorAxis: {
        maxColor: '#7b9b00',
        minColor: '#d7e241',
        type: 'linear',
        allowDecimals: false,
        marker: {
          color: 'black'
        },
        minPadding: 0.005
      },
      tooltip: {
        formatter: function() {
          return '<b>' + this.point.name + '</b><br>' +
            'Asset Hits: ' + this.point.options.hits + '<br>' +
            'Total Volume: ' + this.point.options.volume + '<br>';
        },
        style: {
          fontSize: '12px',
          fontFamily: 'Helvetica, Arial, sans-serif'
        }
      },
      series: [{
        mapData: Highcharts.maps['custom/world'],
        name: 'countries',
        showInLegend: false,
        borderWidth: 0.2,
        states: {
          hover: {
            borderWidth: 1
          }
        }
      }]
    });
  }

  scope.$on('geoData', function(event, data) {
    var validData = function (data) {
      var equal = _.isEqual(data, cachedData);
      if (!equal && data.length > 1) {
        return data;
      }
        };

        if (validData) {
          if (!chart) {
            createChart();
          }
          updateSeries(data);
        }
        cachedData = data;
      }, true);

      function updateSeries(data) {
        if (chart !== undefined) {
          if (chart.series.length > 1) {
            chart.series[1].remove();
          }
        }
        chart.addSeries({
          data: data,
          title: 'Performance by Country',
          mapData: Highcharts.maps['custom/world'],
          joinBy: ['hc-key', 'countryiso'],
          name: 'countries',
          borderWidth: 0.2,
          borderColor: 'black',
          states: {
            hover: {
              borderWidth: 1,
              color: '#7b9b00'
            }
          }
        });
      }
    }
  };
}

Video displaying the issue:

http://video.arkena.com/play2/embed/player?accountId=123516&mediaId=37abf85e-00090006-00448f9f&configId=default&pageStyling=adaptive&autoplay=true&repeat=true&sharing=true

[oysteinmoseng]

I have not been able to reproduce this, using Chrome on Mac.

Do you get any errors in the browser web console when this happens? Are you able to pinpoint when this happens?

[oysteinmoseng]

Closing for now, will reopen if we are able to reproduce it.