Introducing bar charts_Highcharts Essentials-QQ阅读女频现言网

上QQ阅读APP看书，第一时间看更新

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: {
      categories: ['0', '1-2', '3-5', '6-10', '11-20', '21+']
    },
    yAxis: {
      min:0,
      max: 25,
      tickInterval: 5
    },
    tooltip: {
      enabled: false
    },
    series: [{
      name: '2014',
      data: [16, 17, 18, 13,15, 21]
    }]
  });
})();

Notice the use of min and max in yAxis to define the minimum and maximum values. We have also set an interval of 5 using the tickInterval property.

Since the population is measured in percentage in this particular example, it's appropriate to append a % symbol to the labels on the yAxis component using the formatter method, as shown in the following code:

yAxis: {
  min:0,
  max: 25,
  tickInterval: 5,
  labels: {
        enabled: true,
        formatter: function() {
            return this.value + "%";
        }
    }
}

This will result in the following chart:

We can also enable dataLabels in the plotOptions component to show data point values next to the bars:

plotOptions: {
  series: {
    dataLabels: {
      enabled: true,
      formatter: function() {
        return this.y + '%';
      }
    }
  }
}

We used the formatter method to append a % symbol next to the values. Also, note that we referenced the data point values using this.y inside the formatter.

The data labels will now appear next to the bars, as shown in the following screenshot:

Note

You might also be interested in other properties that are available in the formatter() method. You can find more about them at http://api.highcharts.com/highcharts#tooltip.formatter.