search

highcharts / highcharts-react-native

Other
103 stars 79 forks source link

How to use map module? #66

Closed kdenz closed 4 years ago

kdenz commented 4 years ago 
<HighchartsReactNative
        useCDN={true}
        useSSL={true}
        styles={chartStyles}
        options={chartOptions}
        modules={['map']}
      />

It doesn't work like this, any clue? @sebastianbochan thanks~

For the options I'm using exactly what worked for highcharts react web

export const getChartOptions = ({
  // formatNumber,
  // currency,
  data,
  height,
}: AreaChartOptions) => {
  return {
    exporting: {
      enabled: false,
    },
    title: {
      text: '',
    },
    chart: {
      height,
      borderRadius: rd('xSmall'),
      backgroundColor: '#f8f8f9',
      style: {
        fontFamily: '"Montserrat", sans-serif',
      },
    },
    plotOptions: {
      map: {
        states: {
          hover: {
            color: '#EEDD66',
          },
        },
      },
    },
    colorAxis: {
      minColor: 'rgba(34,92,116,0.20)',
      maxColor: '#225C74',
      labels: {
        enabled: true,
        style: {
          fontSize: 13,
        },
      },
    },
    tooltip: {
      // formatter: function () {
      //   return (
      //     this.point.name +
      //     ': ' +
      //     formatNumber(this.point.value, {style: 'currency', currency})
      //   );
      // },
    },
    legend: {
      enabled: data.length > 0,
      align: 'right',
      verticalAlign: 'bottom',
    },
    series: [
      {
        animation: false,
        mapData: worldContinentData,
        joinBy: 'hc-key',
        data,
        dataLabels: {
          enabled: true,
          format: '{point.name}',
        },
      },
    ],
    mapNavigation: {
      enabled: false,
      buttonOptions: {
        verticalAlign: 'bottom',
      },
    },
  };
};
kdenz commented 4 years ago

I'm getting this image

sebastianbochan commented 4 years ago

Hi @kdenz, Would you like to use the module: https://code.highcharts.com/maps/modules/map.js ? At this moment highmaps are not supported, so this module is also not valid.

ShrikantRao commented 4 years ago

Hi @sebastianbochan , Please let us know the list of all supported modules.

epfromer commented 4 years ago

Are Chord and Network Graph modules supported for Native?

Denyllon commented 4 years ago

@ShrikantRao, @epfromer, here is the list of the modules which should work without any problems: