Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
Highcharts Essentials
Highcharts Essentials

Highcharts Essentials: Create interactive data visualization charts with the Highcharts JavaScript library

eBook
$9.99 $28.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Highcharts Essentials

Chapter 2. Column and Bar Charts

In the previous chapter, we discussed Highcharts and its features. We also took a look at the files that come with the package and then constructed a simple column chart to get started with Highcharts development.

In this chapter, we will examine column and bar charts more thoroughly and utilize the Highcharts API to make a variety of charts with different configuration options. To be more specific, in this chapter, we will:

  • Take an overview of column charts
  • Stack basic column charts to make data visually more understandable
  • Learn how to configure charts to drill down to more detailed charts
  • Adjust ticks and other chart elements
  • Create bar charts
  • Configure bar charts with negative stacks

Introducing column charts

Column charts are the most common type of charts. They have categories organized horizontally on the x axis (for example, time) and data is placed vertically on the y axis. They are useful for illustrating the difference between the data of each category.

Consider the London Olympics 2012 medal table, in which the top five countries are as follows:

Rank

Country

Gold

Silver

Bronze

Total

1

United States

46

29

29

104

2

China

38

27

23

88

3

Great Britain

29

17

19

65

4

Russian Federation

24

26

32

82

5

South Korea

13

8

7

28

The preceding list shows the gold, silver, and bronze medals won by the top five countries. The last column shows the total number of medals won by the respective country. We will plot this data into a column chart for a more meaningful visualization:

  1. Create a new blank HTML file that includes the jQuery and highcharts.js scripts. You can also copy the HTML code from the example in the previous chapter. Note that the...

Including multiple data series

Since the previous chart only shows the total number of medals, it's not very helpful when looking for the numbers of gold, silver, or bronze medals earned by each country. We can modify the chart to show the individual numbers while retaining its simplicity.

Copy the code from the previous example and modify the code to include an array of multiple series:

series: [{
  name: 'Gold',
  data: [46, 38, 24, 29, 13]
}, {
  name: 'Silver',
  data: [29, 27, 26, 17, 8]
}, {
  name: 'Bronze',
  data: [29, 23, 32, 19, 7]
}]

This modification of code will result in a chart showing the number of gold, silver, and bronze medals for each country.

As mentioned earlier, you can always navigate to the Highcharts documentation to find more about the series component at http://api.highcharts.com/highcharts#series.

Including multiple data series

You can toggle the display of each series by clicking on the legend corresponding to each category at the bottom of the chart.

In this...

Stacking column charts

There are two types of stacking in Highcharts:

  • Normal stacking
  • Percentage stacking

Let's have a look at the normal stacking of column charts in the following sections.

Column charts with normal stacking

Normal stacking stacks the data series on top of each other. This is a great way to visualize the total value of each category while showing any underlying data.

Copy the code of the first example of this chapter and modify the JavaScript to include the plotOptions component, as shown in the following code:

(function() {
  $( '#medal_table' ).highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Olympics 2012 Medal Table'
    },
    subtitle: {
      text: 'Source: http://www.bbc.com/sport/olympics/2012/medals/countries'
    },
    xAxis: {
      title: {
        text: 'Countries'
      },
      categories: ['United States', 'China', 'Russian Federation', 'Great...

Excluding a series from stacking

We can also exclude a particular series from stacking by passing null to its stacking property, as shown in the following code:

series: [{
  name: 'Gold',
  data: [46, 38, 24, 29, 13]
}, {
  name: 'Silver',
  data: [29, 27, 26, 17, 8]
}, {
  name: 'Bronze',
  data: [29, 23, 32, 19, 7],
  stacking: null
}]

The Bronze series will now be excluded from the stacking context and will be shown in a separate column:

Excluding a series from stacking

In the next example, we will configure the column chart to stack data series proportionally for each category.

Drilling down the chart

Consider the following table showing the retail revenue breakdown by month for the US video game industry starting from March 2012 to February 2014:

 

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

Jan

Feb

2012 - 2013

1.1

0.63

0.52

0.7

0.55

0.52

0.85

0.76

2.55

3.21

0.84

0.81

2013 - 2014

0.99

0.5

0.39

0.59

0.44

0.52

1.08

0.79

2.74

3.28

0.66

0.89

This table shows the revenue (in billions of US dollars) for the video game retail industry. In this example, we will plot a chart to visualize this data. We will draw a column chart that shows the total revenue for the fiscal year starting from March 2012 to February 2014. On clicking on the column, the reader will be shown a more detailed column chart showing the breakdown by months for the respective year.

Note

To use the drilldown feature, you need to include the Highcharts-4.x.x/js/modules/drilldown.js file in your HTML after the Highcharts.js file. Not doing so will not throw any error...

Introducing column charts


Column charts are the most common type of charts. They have categories organized horizontally on the x axis (for example, time) and data is placed vertically on the y axis. They are useful for illustrating the difference between the data of each category.

Consider the London Olympics 2012 medal table, in which the top five countries are as follows:

Rank

Country

Gold

Silver

Bronze

Total

1

United States

46

29

29

104

2

China

38

27

23

88

3

Great Britain

29

17

19

65

4

Russian Federation

24

26

32

82

5

South Korea

13

8

7

28

The preceding list shows the gold, silver, and bronze medals won by the top five countries. The last column shows the total number of medals won by the respective country. We will plot this data into a column chart for a more meaningful visualization:

  1. Create a new blank HTML file that includes the jQuery and highcharts.js scripts. You can also copy the HTML code from the example in the previous chapter. Note that the...

Including multiple data series


Since the previous chart only shows the total number of medals, it's not very helpful when looking for the numbers of gold, silver, or bronze medals earned by each country. We can modify the chart to show the individual numbers while retaining its simplicity.

Copy the code from the previous example and modify the code to include an array of multiple series:

series: [{
  name: 'Gold',
  data: [46, 38, 24, 29, 13]
}, {
  name: 'Silver',
  data: [29, 27, 26, 17, 8]
}, {
  name: 'Bronze',
  data: [29, 23, 32, 19, 7]
}]

This modification of code will result in a chart showing the number of gold, silver, and bronze medals for each country.

As mentioned earlier, you can always navigate to the Highcharts documentation to find more about the series component at http://api.highcharts.com/highcharts#series.

You can toggle the display of each series by clicking on the legend corresponding to each category at the bottom of the chart.

In this example, we included multiple series...

Stacking column charts


There are two types of stacking in Highcharts:

  • Normal stacking

  • Percentage stacking

Let's have a look at the normal stacking of column charts in the following sections.

Column charts with normal stacking

Normal stacking stacks the data series on top of each other. This is a great way to visualize the total value of each category while showing any underlying data.

Copy the code of the first example of this chapter and modify the JavaScript to include the plotOptions component, as shown in the following code:

(function() {
  $( '#medal_table' ).highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Olympics 2012 Medal Table'
    },
    subtitle: {
      text: 'Source: http://www.bbc.com/sport/olympics/2012/medals/countries'
    },
    xAxis: {
      title: {
        text: 'Countries'
      },
      categories: ['United States', 'China', 'Russian Federation', 'Great Britain', 'South Korea']
    },
    yAxis: {
      title: {
        text: 'Number of total...

Excluding a series from stacking


We can also exclude a particular series from stacking by passing null to its stacking property, as shown in the following code:

series: [{
  name: 'Gold',
  data: [46, 38, 24, 29, 13]
}, {
  name: 'Silver',
  data: [29, 27, 26, 17, 8]
}, {
  name: 'Bronze',
  data: [29, 23, 32, 19, 7],
  stacking: null
}]

The Bronze series will now be excluded from the stacking context and will be shown in a separate column:

In the next example, we will configure the column chart to stack data series proportionally for each category.

Drilling down the chart


Consider the following table showing the retail revenue breakdown by month for the US video game industry starting from March 2012 to February 2014:

 

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

Jan

Feb

2012 - 2013

1.1

0.63

0.52

0.7

0.55

0.52

0.85

0.76

2.55

3.21

0.84

0.81

2013 - 2014

0.99

0.5

0.39

0.59

0.44

0.52

1.08

0.79

2.74

3.28

0.66

0.89

This table shows the revenue (in billions of US dollars) for the video game retail industry. In this example, we will plot a chart to visualize this data. We will draw a column chart that shows the total revenue for the fiscal year starting from March 2012 to February 2014. On clicking on the column, the reader will be shown a more detailed column chart showing the breakdown by months for the respective year.

Note

To use the drilldown feature, you need to include the Highcharts-4.x.x/js/modules/drilldown.js file in your HTML after the Highcharts.js file. Not doing so will not throw any error or...

Left arrow icon Right arrow icon

Description

If you are a web developer with a basic knowledge of HTML, CSS, and JavaScript and want to quickly get started with this web charting technology, this is the book for you. This book will also serve as an essential guide to those who have probably used a similar library and are now looking at migrating to Highcharts.

What you will learn

  • Create various chart types including line, column, bar, area, and pie
  • Use best practices and techniques to efficiently visualize the data
  • Customize Highcharts aesthetics with web fonts, different fill types, and jQuery UI for animations
  • Utilize the Highcharts API and events to programmatically accomplish various tasks
  • Preprocess data from various sources to dynamically plot the chart
  • Export your charts to different formats including .pdf, .png, .jpeg, or .svg

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Oct 31, 2014
Length: 228 pages
Edition : 1st
Language : English
ISBN-13 : 9781783983971
Category :
Languages :
Tools :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Oct 31, 2014
Length: 228 pages
Edition : 1st
Language : English
ISBN-13 : 9781783983971
Category :
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $29.97 $86.97 $57.00 saved
Learning Highcharts 4
$48.99
Highcharts Essentials
$48.99
Learning Highcharts
$48.99
Total $29.97$86.97 $57.00 saved Stars icon
Banner background image

Table of Contents

10 Chapters
1. Getting Started with Highcharts Chevron down icon Chevron up icon
2. Column and Bar Charts Chevron down icon Chevron up icon
3. Line and Spline Charts Chevron down icon Chevron up icon
4. Area, Scatter, and Bubble Charts Chevron down icon Chevron up icon
5. Pie, Polar, and Spider Web Charts Chevron down icon Chevron up icon
6. Other Chart Types Chevron down icon Chevron up icon
7. Theming with Highcharts Chevron down icon Chevron up icon
8. Exploring Highcharts APIs and Events Chevron down icon Chevron up icon
9. Going Further with Highcharts Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
(2 Ratings)
5 star 50%
4 star 0%
3 star 50%
2 star 0%
1 star 0%
destinyawaits758 Dec 29, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Book: Highcharts EssentialsAuthor: Bilal ShahidOnline: Amazon, Packt PublishingISBN-13: 9781783983964Pages: 228Disclaimer: I served as a technical reviewer for this book and received a free digital and print copy but this did not influence my evaluation in any way.Highcharts Essentials is a concise 228-page step-by-step guide for creating interactive data visualization charts with the Highcharts JavaScript Library. The book's target audience is developers who are just starting out with Highcharts or others who may have knowledge of similar JavaScript libraries and are looking to migrate to Highcharts. It does assume familiarity with JavaScript, HTML and CSS so please be prepared to hit the ground running and don't expect any hand-holding in that department. Barring this prerequisite knowledge, readers can feel like they are being thrown into the deep end with all the references to programming jargon like anonymous functions, objects and arrays.Highcharts Essentials covers the basics on how to get up to speed quickly with Highcharts and provides very easy to follow code examples accompanied by downloadable samples. The writing is very lucid and the content is quite logically organized moving from the very simple to the moderately complex towards the end of the book. The code examples are great but what is even greater is allowing the reader to make the link between this code and the actual Highcharts API resource. The author does a great job at enabling the reader to see the code examples in proper context rather than just isolated pieces code that they just need to include in their projects.As with most technical books of this nature, the treatment of the topics are somewhat clinical. While I do appreciate the author's attempt to use real-life examples, it does feel a little wearisome at times but I'm not sure if anything can be done to make the chapters more interesting. I did appreciate the fact that the reader is presented with enough digestible material in each chapter and is not overwhelmed with too much information especially for an "essentials" book.What I wanted to see more of was greater reader engagement for example, directing the reader to perform certain guided tasks based on information already shared. This would really help solidify concepts in their minds and present an element of challenge which would in turn make reading this book more exciting. (E.g. invite the reader to create a drilldown donut chart.)I found the last three chapters of the book most valuable particularly because I am a more advanced user of Highcharts and so naturally topics such as theming, exploring the Highcharts API and preprocessing data from various sources appeals to me most. I think some time could have been spent on exploring some of the built-in themes that comes out the box with Highcharts but I'm sure that the fact that the author demonstrated how to build our own custom themes is of far greater value. I particularly enjoyed the section on the usage of third-party library Papa Parse (http://papaparse.com/) and actually found use for it on a side project I was working on while reading Highcharts Essentials.If you are a novice Highcharts user looking to learn the basics of Highcharts through a somewhat instructor-led format, then I would highly recommend to read this book to get you up and running quickly.
Amazon Verified review Amazon
Robert Blomdalen Feb 05, 2015
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
This is an introductory book with lots of examples making you familiar to the charting library of Highcharts. The book is easy to follow along with using a pragmatic programming approach.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.