Learning Highcharts

Design and implement stunning data visualizations for your web applications using Highcharts
3.4 (7 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
133 students enrolled
80% off
Take This Course
  • Lectures 31
  • Length 2.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2015 English

Course Description

Data is all around us, but to understand it all, you need to represent the data so that most people can analyze it easily. Highcharts is one of the most popular JavaScript charting libraries, and has an advanced edge as you can add interactive graphical charts to your websites. Highcharts helps developers represent large sets of data in an interesting and interactive way, establishing itself as one of the industry leaders in JavaScript-based charting tools.

Learning Highcharts will walk you through an exciting journey of creating interactive charts to develop incredible web applications.

This video course is a complete knowledge bank that will teach you practical and advanced techniques with Highcharts. The course starts off with a brief introduction to Highcharts explaining different chart types, chart layouts, options, and styling. We continue by working with different data formats such as CSV, XML, and JSON using AJAX. Then, you'll learn how to export chart images on your own server and finally we look at how to integrate jQuery Mobile with Highcharts.

Learning Highcharts not only introduces you to creating charts, but also guarantees that by the end of this course, you will be building high-quality, insightful visual experiences on the Web.

About The Author

Zsolt Gere is a father, cook, and web designer with strong frontend skills. He loves learning and teaching modern HTML5 and JavaScript techniques such as Highcharts.

He currently works for a small-to-mid size news portal network in Hungary where he is a lead member of the web designer and frontend team.

What are the requirements?

  • This video course requires basic familiarity with HTML and JavaScript.

What am I going to get from this course?

  • Set up charts on the Web with HTML by adding just a few lines of JavaScript
  • Process local or remote datasets for chart displays
  • Reveal more about data using drill-down and filtering methodologies
  • Create your own service to export charts to JPEG, PNG, SVG, or PDF formats
  • Make your chart more interactive by adding annotations on the fly
  • Add master–detail features to big datasets to reveal chart details
  • See how easy it is to e-mail static or dynamic charts
  • Integrate Highcharts with the popular jQuery Mobile framework for cross-platform compatibility

Who is the target audience?

  • Learning Highcharts is for both frontend and backend developers whose task is to tame big datasets in a way that it is not only a great visual experience but is also easy to read.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Highcharts Introduction

This video will offer an overview of the course


This is an introduction to Highcharts and its features.


Let's set up and create our first chart.

Section 2: Configuring Highcharts Features and Layouts

Learn the common features of a standard chart.


By understanding where you need to place code, you can configure the title and subtitle of a chart. We will also look at axis labels, tickmarks, and gridlines, as they are closely linked and they all scale together.


Here, we'll examine the implementation of data series and configure the legend, layout, and color settings.

Section 3: Configuring Highcharts with More Options

This video will demonstrate the various ways that can be used to format tooltips, labels, and strings on a chart.


Discover Highcharts' plot lines, plot bands, and zoom features.


Discover useful features such as 3D charts, animation, and multiple series.

Section 4: Chart and Series Types

This will introduce you to the basic chart types, namely line, area and scatter charts.


This will introduce you to area and area spline charts.


This will introduce you to bar and column charts and their siblings.


This will explain when and how to use pie charts with Highcharts.

Section 5: Working with Data

We will explore the three types of formats of the data that can be added to Highcharts as a data source.


We need to find a solution so that when someone clicks on a column in a chart or a subcategory, a subset of data will be presented by another chart, which will show up instead of the previous one. We can also go back to the previous screen by clicking on the back button.


We will learn how Highcharts can process data from CSV, XML, and JSON data sources.


When working with statistics, we often find time-based data, which needs to be handled in Highchart for a custom display. The aim of this video is to review the methods via which these datetime values can be formatted in Highcharts.


Highcharts is client side only and cannot connect to a database. We will create a backend file to connect to the database and produce the right data format for the chart.


Cross-domain data cannot be handled with the XML or JSON (Ajax) methods that we have studied so far. We need to use a method called JSONP, which allows us to maintain data transaction between different domains.

Section 6: User Interaction

Sometimes, having too much data can make a chart look dense and details can be hidden. Zooming in helps bring up the chart details and see a smaller fraction of the graph.


We need to find a solution so that a detailed version and a smaller version of the whole chart can be seen in one chart/screen with the smaller one controlling the bigger one with the details.


Sometimes, we need to add information about a chart on a chart as notes. We will learn how we can dynamically annotate a chart.


Highcharts doesn't have default possibilities to control elements in a chart. We will develop a feature that removes an element by clicking on a button on the tooltip.

Section 7: Sharing Charts on the Web

We need to be able to export charts in different image formats on our own server.


Often, charts need to be shared via e-mails. In our case, chart images can be sent as e-mail attachments.


We need to be able to send a chart with a dynamic-part URL.


Highcharts' default print function prints only the chart, but sometimes, we need to print more.

Section 8: Highcharts on Mobile Platforms

We want to use Highcharts on mobile devices with a mobile framework technique.


We need to create a connection between mobile pages by linking and backlinking them within the jQM's page structure.


We want to be able to view two charts in a multipage jQuery mobile site.


We want to enable and test the drilling down module. Point and click and Pinch gesture of our chart with jQuery mobile.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course