Top 5 beginner tips to work with Highcharts Highmaps

Top 5 beginner tips to work with Highcharts Highmaps

150 150 admin


Highmaps is a pure javascript library that allows developers to build interactive maps. Developed and maintained by the same company that created Highcharts, a highly popular and powerful charting library.

As with Highcharts, Highmaps was designed with mobile browsers in mind. So the same map can be displayed in desktop or mobile environments without any change in its configuration code while allowing things like pinch zooming to mention one.

It is also highly customizable and also provides many different extension hooks which can be used for further customization other than the properties supported by the API.

Finally, another great perk is the fact that it is completely open, so at the end of the day you are free to edit the actual Highmaps code to suit your needs should it come to that.

Here is a sample Map from PayNet , one of our clients; the leading provider of credit ratings on small businesses. It shows a multi data class map with the following customizations: legend text, legend indicator arrow and labels, html tooltip.


The following is a list of tips that may ease your development time based on our experiences while working with the library.

Tip 1 – Start from a demo

The highmaps demo site offers over around 20 different demos. Rather than starting from scratch, it is easier to find the demo that most closely matches your needs and start customizing from there.

Tip 2 – Develop in isolation

 Instead of developing the map inside your own project. Start by using a code playground like This will speed up testing and development on the first phase of customization; getting the colors right, sizes, titles, etc.

Tip 3 – Use dummy data

This one is tied to our last tip. A lot of the time clients have a clear idea of what they want in terms of color scheme, tooltip info, general behavior, etc. So again, it helps to focus on this cosmetic aspects first, and later handle the integration with the real data and eventually with the project itself.

Tip 4- DRY

 Same story as always. If your project handles different maps that share a base configuration, be sure to use that configuration as a template, passing in a configuration object with the appropriate values.

Tip 5 – Check the awesome docs + Forum

The Highcharts/Highmaps documentation is really thorough and should be sufficient for most tasks. If not don’t be afraid to post on their forum, the community is really friendly and you can get a lot of help from it.

Highcharts/Highmaps can seem overwhelming at first, with all the different objects and options available. Especially if you haven’t worked with charting libraries in the past.  However, if you follow the guidelines outlined above; starting from a demo, using either a code playground or dummy page with only but the simplest of data, being mindful of code duplication and checking the existing documentation as well as contacting the community, you will be succeeding in Highmaps in no time.