FillPattern after drillDown to countries on Highchart-react

0
votes

Someone can help me please, i need fillPattern on province/city after i'm drillDown from world to each countries then image will show on the province/city of countries

example i want : enter image description here

Live example: https://codesandbox.io/s/highcharts-react-demo-forked-1f04sp?file=/demo.jsx

1
highchartsreact-highcharts

1 Answers

0
votes

I prepared a demo for the USA where you can see how to apply the fill pattern for the drilldowned series.

events: {
  drilldown(e) {
    const chart = this;
    chart.addSeriesAsDrilldown(e.point, {
      data: data,
      name: 'USA',
      dataLabels: {
        enabled: true,
        format: '{point.properties.postal-code}'
      },
      color: {
        pattern: {
          aspectRatio: 3 / 2
        }
      },
    });
            // this part is a workaround for the bug
            chart.setSize(void 0, void 0, false);
            
            setTimeout(()=>{
                // try set size in here to keep the initial animation and change the fill
                // after the set timeout time
            }, 500);
  }
}

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