Book Image

Highcharts Essentials

By : Bilal Shahid
Book Image

Highcharts Essentials

By: Bilal Shahid

Overview of this book

Table of Contents (16 chapters)
Highcharts Essentials
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Introducing bar charts


Bar charts are similar to column charts, except that they are aligned vertically.

In the following example, we will create a basic bar chart to show the book consumption per capita for the year 2014. Let's start with the basic HTML template we have been using so far:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Highcharts Essentials</title>
</head>
<body>
  
  <div id="book_consumption" style="width: 600px; height: 450px;"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
</body>
</html>

The code for the chart is as follows:

(function() {
  $( '#book_consumption' ).highcharts({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Average Book Consumption Per Capita'
    },
    subtitle: {
      text: 'Source: Harris Interactive'
    },
    xAxis: {...