Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Learning Highcharts 4
Learning Highcharts 4

Learning Highcharts 4: Design eye-catching and interactive JavaScript charts for your web page with Highcharts, one of the leading tools in web charting , Second Edition

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

Learning Highcharts 4

Chapter 2. Highcharts Configurations

All Highcharts graphs share the same configuration structure and it is crucial for us to become familiar with the core components. However, it is not possible to go through all the configurations within the book. In this chapter, we will explore the functional properties that are most used and demonstrate them with examples. We will learn how Highcharts manages layout, and then explore how to configure axes, specify single series and multiple series data, followed by looking at formatting and styling tool tips in both JavaScript and HTML. After that, we will get to know how to polish our charts with various types of animations and apply color gradients. Finally, we will explore the drilldown interactive feature. In this chapter, we will cover the following topics:

  • Understanding Highcharts layout
  • Framing the chart with axes
  • Revisiting the series config
  • Styling the tool tips
  • Animating charts
  • Expanding colors with gradients
  • Constructing a chart with...

Configuration structure

In the Highcharts configuration object, the components at the top level represent the skeleton structure of a chart. The following is a list of the major components that are covered in this chapter:

  • chart: This has configurations for the top-level chart properties such as layouts, dimensions, events, animations, and user interactions
  • series: This is an array of series objects (consisting of data and specific options) for single and multiple series, where the series data can be specified in a number of ways
  • xAxis/yAxis/zAxis: This has configurations for all the axis properties such as labels, styles, range, intervals, plotlines, plot bands, and backgrounds
  • tooltip: This has the layout and format style configurations for the series data tool tips
  • drilldown: This has configurations for drilldown series and the ID field associated with the main series
  • title/subtitle: This has the layout and style configurations for the chart title and subtitle
  • legend: This has the layout and...

Understanding Highcharts' layout

Before we start to learn how Highcharts layout works, it is imperative that we understand some basic concepts first. To do that, let's first recall the chart example used in Chapter 1, Web Charts, and set a couple of borders to be visible. First, set a border around the plot area. To do that we can set the options of plotBorderWidth and plotBorderColor in the chart section, as follows:

        chart: {
                renderTo: 'container',
                type: 'spline',
                plotBorderWidth: 1,
                plotBorderColor: '#3F4044'
        },

The second border is set around the Highcharts container. Next, we extend the preceding chart section with additional settings:

        chart: {
                renderTo: 'container',
                ....
                borderColor: '#a1a1a1',
                borderWidth: 2,
                borderRadius: 3
        },

This sets the container border...

Framing the chart with axes

In this section, we are going to look into the configuration of axes in Highcharts in terms of their functional area. We will start off with a plain line graph and gradually apply more options to the chart to demonstrate the effects.

Accessing the axis data type

There are two ways to specify data for a chart: categories and series data. For displaying intervals with specific names, we should use the categories field that expects an array of strings. Each entry in the categories array is then associated with the series data array. Alternatively, the axis interval values are embedded inside the series data array. Then, Highcharts extracts the series data for both axes, interprets the data type, and formats and labels the values appropriately.

The following is a straightforward example showing the use of categories:

    chart: {
        renderTo: 'container',
        height: 250,
        spacingRight: 20 
    },
    title: {
        text: 'Market Data...

Revisiting the series config

By now, we should have an idea of what the series property does. In this section, we are going to examine it in more detail.

The series property is an array of series configuration objects that contain data- and series-specific options. It allows us to specify single-series data and multiple-series data. The purpose of series objects is to inform Highcharts of the format of the data and how the data is presented in the chart.

All data values in the chart are specified through the data field. The data field is highly flexible and can take an array in a number of forms, as follows:

  • Numerical values
  • An array with x and y values
  • A point object with properties describing the data point

The first two options have already been examined in the Accessing the axis data type section. In this section, we will explore the third option. Let's use the single-series Nasdaq example and we will specify the series data through a mixture of numerical values and objects:

        ...

Exploring PlotOptions

The plotOptions object is a wrapper object for config objects for each series type supported in Highcharts. These configurations have properties such as plotOptions.line.lineWidth, common to other series types, as well as other configurations such as plotOptions.pie.center that is only specific to the pie series type. Among the specific series, there is plotOptions.series, which is used for common plotting options shared by the whole series.

The preceding plotOptions object can form a chain of precedence between plotOptions.series, plotOptions.{series-type}, and the series configuration. For example, series[x].shadow (where series[x].type is 'pie') has a higher precedence than plotOptions.pie.shadow, which in turn has a higher precedence than plotOptions.series.shadow.

The purpose of this is that the chart is composed of multiple different series types. For example, in a chart with multiple series of columns and a single line series, the common properties between...

Configuration structure


In the Highcharts configuration object, the components at the top level represent the skeleton structure of a chart. The following is a list of the major components that are covered in this chapter:

  • chart: This has configurations for the top-level chart properties such as layouts, dimensions, events, animations, and user interactions

  • series: This is an array of series objects (consisting of data and specific options) for single and multiple series, where the series data can be specified in a number of ways

  • xAxis/yAxis/zAxis: This has configurations for all the axis properties such as labels, styles, range, intervals, plotlines, plot bands, and backgrounds

  • tooltip: This has the layout and format style configurations for the series data tool tips

  • drilldown: This has configurations for drilldown series and the ID field associated with the main series

  • title/subtitle: This has the layout and style configurations for the chart title and subtitle

  • legend: This has the layout and...

Understanding Highcharts' layout


Before we start to learn how Highcharts layout works, it is imperative that we understand some basic concepts first. To do that, let's first recall the chart example used in Chapter 1, Web Charts, and set a couple of borders to be visible. First, set a border around the plot area. To do that we can set the options of plotBorderWidth and plotBorderColor in the chart section, as follows:

        chart: {
                renderTo: 'container',
                type: 'spline',
                plotBorderWidth: 1,
                plotBorderColor: '#3F4044'
        },

The second border is set around the Highcharts container. Next, we extend the preceding chart section with additional settings:

        chart: {
                renderTo: 'container',
                ....
                borderColor: '#a1a1a1',
                borderWidth: 2,
                borderRadius: 3
        },

This sets the container border color with a width of 2 pixels and corner radius of 3 pixels...

Framing the chart with axes


In this section, we are going to look into the configuration of axes in Highcharts in terms of their functional area. We will start off with a plain line graph and gradually apply more options to the chart to demonstrate the effects.

Accessing the axis data type

There are two ways to specify data for a chart: categories and series data. For displaying intervals with specific names, we should use the categories field that expects an array of strings. Each entry in the categories array is then associated with the series data array. Alternatively, the axis interval values are embedded inside the series data array. Then, Highcharts extracts the series data for both axes, interprets the data type, and formats and labels the values appropriately.

The following is a straightforward example showing the use of categories:

    chart: {
        renderTo: 'container',
        height: 250,
        spacingRight: 20 
    },
    title: {
        text: 'Market Data: Nasdaq 100'
 ...

Revisiting the series config


By now, we should have an idea of what the series property does. In this section, we are going to examine it in more detail.

The series property is an array of series configuration objects that contain data- and series-specific options. It allows us to specify single-series data and multiple-series data. The purpose of series objects is to inform Highcharts of the format of the data and how the data is presented in the chart.

All data values in the chart are specified through the data field. The data field is highly flexible and can take an array in a number of forms, as follows:

  • Numerical values

  • An array with x and y values

  • A point object with properties describing the data point

The first two options have already been examined in the Accessing the axis data type section. In this section, we will explore the third option. Let's use the single-series Nasdaq example and we will specify the series data through a mixture of numerical values and objects:

         series...

Exploring PlotOptions


The plotOptions object is a wrapper object for config objects for each series type supported in Highcharts. These configurations have properties such as plotOptions.line.lineWidth, common to other series types, as well as other configurations such as plotOptions.pie.center that is only specific to the pie series type. Among the specific series, there is plotOptions.series, which is used for common plotting options shared by the whole series.

The preceding plotOptions object can form a chain of precedence between plotOptions.series, plotOptions.{series-type}, and the series configuration. For example, series[x].shadow (where series[x].type is 'pie') has a higher precedence than plotOptions.pie.shadow, which in turn has a higher precedence than plotOptions.series.shadow.

The purpose of this is that the chart is composed of multiple different series types. For example, in a chart with multiple series of columns and a single line series, the common properties between column...

Left arrow icon Right arrow icon
Download code icon Download Code

Description

The book is aimed at all levels of readers. Beginners can learn the basic configurations and step-by-step approaches in creating charts or Highcharts cloud. For intermediate and advanced readers, the book explores the APIs, events, server-side operations and plugins.

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jan 23, 2015
Length: 478 pages
Edition : 2nd
Language : English
ISBN-13 : 9781783287468
Vendor :
Highsoft
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 : Jan 23, 2015
Length: 478 pages
Edition : 2nd
Language : English
ISBN-13 : 9781783287468
Vendor :
Highsoft
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 $ 146.97
Highcharts Essentials
$48.99
Data Visualization with D3 and AngularJS
$48.99
Learning Highcharts 4
$48.99
Total $ 146.97 Stars icon
Banner background image

Table of Contents

16 Chapters
1. Web Charts Chevron down icon Chevron up icon
2. Highcharts Configurations Chevron down icon Chevron up icon
3. Line, Area, and Scatter Charts Chevron down icon Chevron up icon
4. Bar and Column Charts Chevron down icon Chevron up icon
5. Pie Charts Chevron down icon Chevron up icon
6. Gauge, Polar, and Range Charts Chevron down icon Chevron up icon
7. Bubble, Box Plot, and Error Bar Charts Chevron down icon Chevron up icon
8. Waterfall, Funnel, Pyramid, and Heatmap Charts Chevron down icon Chevron up icon
9. 3D Charts Chevron down icon Chevron up icon
10. Highcharts APIs Chevron down icon Chevron up icon
11. Highcharts Events Chevron down icon Chevron up icon
12. Highcharts and jQuery Mobile Chevron down icon Chevron up icon
13. Highcharts and Ext JS Chevron down icon Chevron up icon
14. Server-side Highcharts Chevron down icon Chevron up icon
15. Highcharts Online Services and Plugins 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 Half star icon 4.5
(2 Ratings)
5 star 50%
4 star 50%
3 star 0%
2 star 0%
1 star 0%
Robert Blomdalen Mar 17, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book is a very comprehensive guide to the Highcharts charting library. Learn and explore from basic examples with well written descriptions on why and how to make the changes to the implementations.
Amazon Verified review Amazon
Vinay Mar 27, 2015
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
If you want to learn and you've seemed confused looking at just about anything, this is a great introduction to HighCharts for someone.
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.