highcharts-browserify

Highcharts wrapper for browserify

Usage no npm install needed!

<script type="module">
  import highchartsBrowserify from 'https://cdn.skypack.dev/highcharts-browserify';
</script>

README

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
});

Collaborators

highcharts-browserify is only possible due to the excellent work of the following collaborators: