The HighchartTable plugin takes data and attributes from a table and parses them to simply create an Hightcharts chart.

The plugin does not contains Highcharts or jQuery, so first of all, you must include them your page.

<script src="jquery.min.js" type="text/javascript"></script>
<script src="highcharts.js" type="text/javascript"></script>
<script src="jquery.highchartTable.js" type="text/javascript"></script>

Then you have to set some attributes to the table, like the graph type or where to render the graph.

The series names are defined in the <thead>, their values are defined in the <tbody>.
The first <td> of a <tr> contains the Xaxis value. The other ones contain the values for each series in that x value.

<table class="highchart" data-graph-container-before="1" data-graph-type="column">
  <thead>
      <tr>
          <th>Month</th>
          <th>Sales</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>January</td>
          <td>8000</td>
      </tr>
      <tr>
          <td>February</td>
          <td>12000</td>
      </tr>
  </tbody>
</table>

$(document).ready(function() {
  $('table.highchart').highchartTable();
});

Just before the graph is rendered, an event is triggered, which allows you to change the Highchart chart options.

For example, let's say that you want to define the colors of your data series according to the graph container. Instead of doing this on server-side on every chart you have, you will do this on the client side using the highchartTable.beforeRender jQuery custom event.
The second parameter contains the objet that will be passed to the Highcharts.Chart function. That's the one you must modify in order to change the colors of the graph.
The documentation about this object is available in the Highcharts doc.

$('table.highchart')
  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
    highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
  })
  .highchartTable();
          

In issue 8 we removed the default value for the graph-yaxis-X-title-text attribute. If you were using it, here is an example of how you can get the default value back :

  $('table.highchart')
  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
    $.each(highChartConfig.yAxis, function (index, value)   {
      value.title.text = value.title.text || 'Valeur';
    });
  });