How to learn Highcharts

Highcharts 101


Highcharts’ learning curve is easy and smooth, thanks to the user-friendly and extensive documentation, and also to the vast developer-base support.

This post will guide you understand what types of documentation and support are available, where to find them to start with Highcharts quickly, regardless of your coding skills.

At the end of this post, you will be familiar with these topics:

  • Highcharts’ libraries and products.
  • Location of the documentation and demos.
  • Where and how to get support and help to solve your challenges.

Highcharts allows you to create virtually any kind of interactive chart, even with minimal technical or programming knowledge. And if you are a programmer, the customization options are extensive. As an additional benefit, Highcharts offers an accessibility module, which, with only one line of code, makes your charts compatible with assistive technologies used by people with disabilities.

1. Highcharts’ products

Let’s check the main Highcharts’ tools and products. The table below displays all Highcharts’ products and how friendly they are to techies and nontechies.

ToolsFor techiesFor non-techies
Highcharts JS libraries (Highcharts, Highstock, Highmaps, Gantt)YesNo
Highcharts mobile (iOS and Android)YesNo
Highchats CloudYesYes
Highcharts EditorYesYes
Wrappers & PluginsYesNo

The following chart displays the overview of Highcharts products and where you can find them on the website:

Let’s dive into the products to understand what they can offer you:

  1. Highcharts libraries
    Libraries are divided into four main branches:

    • Highcharts to create the chart types like line, bar, column, pie, donut, parliament, streamgraph, scatter plot, Sankey diagram, dependency wheel, etc.
    • Highstock to create stock or general timeline charts with different types such as Candlesticks, OHCL, etc. and using a variety of indicators such as MACD pivot points, SMA, etc.
    • Highmaps to create interactive maps using different shapes and chart combinations such as standard maps, map bubbles, honeycomb map, etc.
    • Highcharts Gantt to create interactive Gantt chart
  2. Mobile
    Highcharts is available for iOS and Android using Highcharts iOS wrapper and Highcharts Android wrapper, respectively.
  3. Editor
    Highcharts Cloud and Highcharts Editor allow anyone to easily and quickly create interactive charts thanks to the user-friendly interface.
  4. Wrappers & Plugins
    Highcharts offers a variety of Wrappers and Plugins that allow you to create interactive charts in different languages and styles.
    For instance, Higcharter is a very popular R wrapper for Highcharts, that helps researchers, students, and R developers, in general, to use Highcharts without learning JavaScript.

2. Documentation and demos

Now, you know what kind of tools and products you can use to create interactive charts. It is time to know what kind of documentation, demos, and code you can get and where to find them.

A. Documentation

By looking at the demos, we are just scratching the surface. Developers love Highcharts for its well-documented API and documentation. Every feature, option, and type chart has a detailed description with an accompanying demo. For developers of all skill levels, this translates into minimal time spent creating and customizing charts.

To access the API and documentation, click on DOCS from the official website:

B. Documentation for non-techies

If coding is not your cup of tea, well, you can use Highcharts editor (a developer needs to set it up) or Highchart Cloud. And, there are many videos and documentation to help you create interactive charts with ease:

C. Blog

Another wise way to understand how to use Highcharts is to take a look at our blog posts. You can find helpful tricks and tips articles to create effective data visualization and dashboards, set up projects with different technologies and frameworks, etc.

D. Demos

A good way to understand what kind of charts you can make, and even look at the underlying code, is to study the charts on our demo pages.

Select the product you are interested in by choosing from the DEMO drop-down in the main navigation of our website:

All the demos come with the following information:

  • View Options: To review the chart options of the current demo.
  • Edit in JSFiddle and Edit in Codepen: To let you review and tweak the options in real-time in either of these 3rd party sites. This is really great for learning how the different options affect the rendering of the chart.

Some demos can also be edited in Highcharts Cloud, which may be the best way for non-developers to learn and experiment (see demo below).

3. Support

Another excellent advantage of the Highcharts library is its support. You can count on the Highcharts tech support team as well as on its huge tech community, by using the following support channels:

  • Highcharts Forum and Stack Overflow
    Visit our forum or Stack Overflow if you have any technical issues or challenges to achieve your desired chart. You are also more than welcome to help other developers and join the Highcharts community 🙂
  • GitHub
    We encourage you to use Github to report any bug or to send a pull request to suggest a fix.
  • UserVoice
    Share with us your feedback, a wish feature, or any idea on UserVoice; we will always listen from our community.
  • Sales support
    Feel free to get in touch with our sales team for any questions regarding our license.

You can find all those channels and more under the SUPPORT drop-down menu:

With this short introduction, hopefully, know more about how to get started using Highcharts to visualize your data.
Share your questions, comments, and concerns about this “how to Highcharts” article in the comment section below.