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.

How to use it:

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous">
</script>
<script src="https://code.highcharts.com/highcharts.js"></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")
   .resusableHighChart()
   .getChart();

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

$("#container")
  .resusableHighChart()
  .updateChart(data, options);

$("#container")
  .resusableHighChart()
  .updateChart(data);

5. Set the options programmatically.

var otherOptions = {
    // Highcharts options here
};

$("#container")
  .reusableHighchart()
  .defineOptions(otherOptions);

---

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