How to use

Installation

Highcharts uses either jQuery or MooTools for some common JavaScript tasks. In addition, Internet Explorer needs ExCanvas which emulates the Canvas element. You need to include these JavaScript files in the <head> section of your web page. If you already have jQuery or MooTools included, you can skip the first one.
```
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/highcharts/highcharts.js"></script>
<script type="text/javascript" src="/highcharts/excanvas-compressed.js"></script>
```

In a <script> tag in the <head> of your web page, or in a separate .js file, add the JavaScript code to initialize the chart. Note that the id of the div where you want to put the chart (see #3) is given in the renderTo option below:

<script type="text/javascript">
   $(document).ready(function() {
      var chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'chart-container-1',
            defaultSeriesType: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges]
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });
</script>

The code above uses the jQuery specific way of launching code on document ready, as explained at the jQuery website. If you use MooTools, instead of the $(document).ready() syntax you do it slightly differently:

<script type="text/javascript">
   window.addEvent('domready', function() {
      var chart1 = .......

Add a div in your webpage. Give it an id refering to the renderTo option in #2, and set a specific width and height which will be the width and height of your chart.
```
<div id="chart-container-1" style="width: 600px; height: 400px"></div>
```

How to set up the options

Highcharts uses a JavaScript object structure to define the options. The options are nested into categories. The options are mainly strings and numbers, but some are arrays, other objects or even functions. When you initialize the chart using new Highcharts.Chart, the options object is the first and only parameter you pass.

If you want to apply a set of options to all charts on the same page, use Highcharts.setOptions like shown below.

See #3 above for an example of an options object. For more examples see the demo gallery. For a full reference of the options available, see the options reference.

API methods

Highcharts.Chart ( options )

This is the constructor for creating a new chart object. See example in #3 above.

Highcharts.dateFormat ( format, timestamp [, capitalize] )

Formats a JavaScript date timestamp (milliseconds since Jan 1st 1970) into a human readable date string. The format is a subset of the formats for PHP's strftime function.

Currently these formats are supported:

%a: Short weekday, like 'Mon'.
%A: Long weekday, like 'Monday'.
%d: Two digit day of the month, 01 to 31.
%e: Day of the month, 1 through 31.
%b: Short month, like 'Jan'.
%B: Long month, like 'January'.
%m: Two digit month number, 01 through 12.
%y: Two digits year, like 09 for 2009.
%Y: Four digits year, like 2009.
%H: Two digits hours in 24h format, 00 through 23.
%I: Two digits hours in 12h format, 00 through 11.
%l (Lower case L): Hours in 12h format, 1 through 11.
%M: Two digits minutes, 00 through 59.
%p: Upper case AM or PM.
%P: Lower case AM or PM.
%S: Two digits seconds, 00 through 59

Example:

tooltip: {
   formatter: function() {
      return '<b>'+ this.series.name +'</b><br/>'+
         Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +': '+ this.y +' m/s';
   }
}, ...

Highcharts.numberFormat ( number, decimals, decPoint, thousandsSep )

Formats a JavaScript number with grouped thousands, a fixed amount of decimals and an optional decimal point. It is a port of PHP's function with the same name. See PHP number_format for a full explanation of the parameters.

tooltip: {
   formatter: function() {
      return '<b>'+ this.series.name +'</b><br/>'+
         this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' millions';
   }
}, ...

Highcharts.setOptions(options)

Sets the options globally for all charts created after this has been called. Takes an options JavaScript object structure as the argument. These options are merged with the default options and the result is returned.