Customizing Your Highcharts Map

Welcome to your customizable Highcharts map! This guide will walk you through the basics of personalizing your map, including adding new countries and changing colors.

Adding New Countries

To add new countries to your map data:

1. Locate the jsonDataMap Array: This array contains the data for countries you want to display on the map.
2. Add a New Country Entry: Append a new object to the jsonDataMap array with the country's details. Use the ISO alpha-3 code for the country. Example:
3. {
      "Rank": 26,
      "Code": "ESP",
      "Country": "Spain",
      "Population": "123456"
   }

Ensure the Rank, Code, Country, and Total fields are filled out accordingly.

Changing Country Colors

Colors are based on the value field associated with each country. Customize these through the colorAxis configuration:

• Min and Max Colors: Set the minColor and maxColor properties under colorAxis to define the start and end colors of your gradient. Example:
• colorAxis: {
   minColor: '#010a4f',
   maxColor: '#ff5c79'
}
• Default Color for Unlisted Countries: Use the nullColor property within the series object to set a default color for countries not included in your list.
  Example:
• series: [{
   nullColor: '#cccccc',
}]
• Change font color of the range bar. Example:
• labels: {
   style: {
     color: '#FF0000'
   }      
}


Displaying Tooltips

Tooltips show detailed information when hovering over countries. They are enabled by default and pull data from the jsonDataMap array.

• You can style and change text of your Tooltip directly in Webflow!


Final Notes

• Always Test Changes: After making modifications, preview your map to ensure all changes appear as expected.
• Consult Highcharts Documentation: For more advanced customizations, refer to the Highcharts API Documentation.
• If you need a further assistance contact us through our free Live Support Page

This guide provides the foundation for customizing your Highcharts map. Happy mapping!