Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
 

<div id="container"></div>

JavaScript

Highcharts.drawTable = function(chart) {
   // user options
   var tableTop = 310,
     colWidth = 100,
     tableLeft = 200,
     rowHeight = 20,
     cellPadding = 2.5,
     valueDecimals = 0,
     valueSuffix = '';

   // internal variables
   var
     series = chart.series,
     renderer = chart.renderer,
     cellLeft = tableLeft,
     ticks = chart.xAxis[0].ticks;

   for (let i in ticks) {
     if (ticks[i].label) {
       renderer.text(
           ticks[i].label.textStr,
           cellLeft + cellPadding,
           tableTop + (i) * rowHeight - cellPadding + 40
         )
         .css({
           fontWeight: 'bold'
         })
         .add();
     }

   }

   series.forEach(function(serie, i) {
     cellLeft += colWidth;

     // Apply the cell text
     renderer.text(
         serie.name,
         cellLeft - cellPadding + colWidth,
         tableTop + rowHeight - cellPadding
       )
       .attr({
         align: 'right'
       })
       .css({
         fontWeight: 'bold'
       })
       .add();

     serie.data.forEach(function(point, row) {

       // Apply the cell text
       renderer.text(
           Highcharts.numberFormat(point.y, valueDecimals) + valueSuffix,
           cellLeft + colWidth - cellPadding,
           tableTop + (row + 2) * rowHeight - cellPadding
         )
         .attr({
           align: 'right'
         })
         .add();

       // horizontal lines
       if (row === 0) {
         Highcharts.tableLine( // top
           renderer,
           tableLeft,
           tableTop + cellPadding,
           cellLeft + colWidth,
           tableTop + cellPadding
         );
         Highcharts.tableLine( // bottom
           renderer,
           tableLeft,
           tableTop + (serie.data.length + 1) * rowHeight + cellPadding,
           cellLeft + colWidth,
           tableTop + (serie.data.length + 1) * rowHeight + cellPadding
         );
       }
       // horizontal line
       Highcharts.tableLine(
         renderer,
        ...