Highcharts-browserify NPM

highcharts-browserify

Browserify bundle for Highcharts.

Installation

$ npm install --save highcharts-browserify

How to use

var $ = require('jquery');
var HighCharts = require('highcharts-browserify');

new Highcharts.Chart({
  chart: {
    renderTo: $('#my-chart')
  },
  // ... more options - see http://api.highcharts.com/highcharts
});

More graph types

Several extra graph types are included as modules. By requiring the graph type you need, highcharts will be extended to support that graph type.

var $ = require('jquery');
var HighCharts = require('highcharts-browserify/modules/solid-gauge');

new Highcharts.Chart({
  chart: {
    type: 'solidgauge',
    renderTo: $('#my-chart')
  },
  // ... more options - see http://www.highcharts.com/articles/2-news/46-gauges-ranges-and-polar-charts-in-beta
});

Themes

Just require the theme you want to use. Highcharts will automatically be configured to use that theme. See the themes documentation for more information.

var $ = require('jquery');
var HighCharts = require('highcharts-browserify');
require('highcharts-browserify/themes/dark-blue');

new Highcharts.Chart({
  chart: {
    renderTo: $('#my-chart')
  },
  // ... more options - see http://api.highcharts.com/highcharts
});

Modules

Similarly to themes, just require the highcharts module you want to use. See below exemplary usage for data module:

var HighCharts = require('highcharts-browserify');
require('highcharts-browserify/modules/data');

var fetchedData = ... //fetch data

new Highcharts.Chart({
  data: fetchedData
  // ... more options - see http://api.highcharts.com/highcharts
});