I want to display the datatable inside Pie chart using Highcharts.I can display the table outside but on exporting the image, datatable is not exported. So my aim is to display datatable inside the Pie chart. Refering to this.I was able to partly acheive it.demo
But how can i give the column headers and borders to it?
$(function () { Highcharts.drawTable = function() { // user options var tableTop = 200, colWidth = 60, tableLeft = 50, rowHeight = 20, cellPadding = 2.5, valueDecimals = 1, valueSuffix = ''; // internal variables var chart = this, series = chart.series, renderer = chart.renderer, cellLeft = tableLeft; // draw category labels $.each(series, function(serie_index, serie) { renderer.text( serie.name, cellLeft + cellPadding, tableTop + (serie_index + 1) * rowHeight - cellPadding ) .css({ fontWeight: 'bold' }) .add(); }); $.each(series[0].data, function(i) { renderer.text( series[0].data[i].name, cellLeft + colWidth - cellPadding, tableTop + (i + 2) * rowHeight - cellPadding ) .attr({ align: 'right' }) .add(); }); $.each(series[0].data, function(i) { renderer.text( Highcharts.numberFormat(series[0].data[i].y, valueDecimals) + valueSuffix, 150, tableTop + (i + 2) * rowHeight - cellPadding ) .attr({ align: 'left' }) .add(); }); } $('#container').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, events: { load: Highcharts.drawTable }, height: 600, width: 800, marginBottom: 250 }, title: { text: 'Browser market shares at a specific website, 2010' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', format: '<b>{point.name}</b>: {point.percentage:.1f} %' } } }, series: [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); });