[SOLVED] In HighMaps how can we pattern fill a world map?

In HighMaps how can we pattern fill a world map?

I was tring to add dotted pattern to the world map...using highmaps and pattern-fill.js. On doing that i gives a a basic maps with no color.

I used the following template for the same... Help me get it right.

The goal is to get a world continent map where all the continents are pattern filled and the pattern is like the following:

pattern-to-be-generated

(async () => {

  const topology = await fetch(
    'https://code.highcharts.com/mapdata/custom/world-continents.topo.json'
  ).then(response => response.json());

  // Prepare demo data. The data is joined to map using value of 'hc-key'
  // property by default. See API docs for 'joinBy' for more info on linking
  // data and map.
  const data = [
    ['eu', 10],
    ['oc', 11],
    ['af', 12],
    ['as', 13],
    ['na', 14],
    ['sa', 15]
  ];

  // Create the chart
  Highcharts.mapChart('container', {
    chart: {
      type: 'map',
      map: topology
    },

    title: {
      text: 'Highcharts Maps basic demo'
    },

    subtitle: {
      text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world-continents.topo.json">World continents</a>'
    },

    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: 'bottom'
      }
    },

    colorAxis: {
      min: 0
    },

    plotOptions: {
      series: {
        type: "map",
        color: {
          pattern: {
            path: {
              d: 'M 3 3 L 8 3 L 8 8 Z',
              fill: '#102045'
            },
            width: 12,
            height: 12,
            color: '#907000',
            opacity: 0.5
          }
        }
      }
    },
    series: [{
      data: data,
      name: 'Random data',
      color: 'red',
      dataLabels: {
        enabled: true,
        format: '{point.name}'
      }
    }]
  });

})();

Solution

Your color settings in plotOptions is overwritten by color in series options. You need to specify color in one of the places.

plotOptions: {
  series: {
    type: "map",
    color: {
      pattern: {
        path: {
          d: 'M 5 5 m -4 0 a 4 4 0 1 1 8 0 a 4 4 0 1 1 -8 0',
          fill: 'red'
        },
        patternTransform: 'rotate(20)',
        width: 12,
        height: 12,
        color: 'red'
      }
    }
  }
}

Live demo: http://jsfiddle.net/BlackLabel/p60e79sw/

Docs: https://www.highcharts.com/docs/chart-design-and-style/pattern-fills