Using Highcharts without jQuery

Highcharts, the popular JavaScript graphing and charting library, uses the jQuery JavaScript framework by default, and provides adapters allowing it to be used with the Prototype.js and MooTools frameworks instead. All of these frameworks significantly increase the size of Highcharts deployments, as shown in the graph below. HighchartsAdapter, which has a size of only 2,606 bytes when minified and 1,160 bytes when minified and gzipped, is a JavaScript object that allows Highcharts to be used without jQuery or any other JavaScript framework.

Download HighchartsAdapter

Download one of the files below and either incorporate it into your code or serve it as a separate file. The code must be included before the main Highcharts JavaScript.

File Size Description
HighchartsAdapter.js 2,606 bytes Minified version
HighchartsAdapter.src.js 12,757 bytes Full version, with comments

Creating charts

Highcharts charts are often created using code similar to the following:

1
2
3
4
5
6
7
8
9
// create a new chart
$(function(){
  $('#container').highcharts({
    chart : {
      type : 'bar'
    },
    // other options
  });
});

The $ function is part of jQuery, so without jQuery charts are instead created using a pattern such as the following (which uses the runOnLoad function):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// create a new chart
runOnLoad(function(){
  new Highcharts.Chart({
    chart : {
      renderTo : 'container'
      type     : 'bar'
    },
    // other options
  });
});

Where now?

Found this useful? Share it:

Also in JavaScript: