Create Reusable Highcharts Graphs With jQuery

Create Reusable Highcharts Graphs With jQuery

Reusable Highchart is a jQuery plugin that helps developers to create reusable, interactive charts/graphs using the popular Highcharts library.

The plugin enables you to embed multiple Highcharts based graphs into the page and update/set data and options programmatically.

1. Include the jQuery, Highcharts and Reusable Highchart plugin on the page.

<script src="" 
<script src=""></script>
<script src="dist/jquery.reusable-highcharts.min.js"></script>

2. Create a Highcharts graph the way you like.

<div id="container" style="width:100%; height:400px;"></div>
$(function () { 
  var myChart = Highcharts.chart('container', {
      chart: {
          type: '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]

3. Make the Highcharts graph reusable and get the Highcharts object(s).

var myObject = $("#container")

4. Update the data and/or options of the Highcharts graph.

  .updateChart(data, options);

5. Set the options programmatically.

var otherOptions = {
    // Highcharts options here

This awesome jQuery plugin is developed by darrenjaworski. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 25.07.2018
  • Source