How to style Highchart data table and make it responsive? - highcharts

Question

I'm trying to export my highchart to a table below it. In their documentation about Highchart Table, I only found this with this example
I'm trying to style the table with colored thead, but there's no thead tag in Highcharts' table. This doesn't work too
// draw category labels
chart.xAxis[0].categories.forEach(function (name, i) {
renderer.text(
name,
cellLeft + cellPadding,
tableTop + (i + 2) * rowHeight - cellPadding
)
.css({
fontWeight: 'bold',
backgroundColor: '#aaa'
})
.add();
});
Things I'm trying to do:
1. Color the thead
2. Append the average temperature below the chart
3. Erase the empty border stroke above the Month column
4. Make the table responsive
I can't seem to find any Highchart table documentation. Any help is welcomed. Thank you

Answer 1

This css worked for me and it is responsive!
I got the css from this demo.
I just cut and paste it into my css file and DONE.
.highcharts-data-table table {
border-collapse: collapse;
border-spacing: 0;
background: white;
min-width: 100%;
margin-top: 10px;
font-family: sans-serif;
font-size: 0.9em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
border: 1px solid silver;
padding: 0.5em;
}
.highcharts-data-table tr:nth-child(even), .highcharts-data-table thead tr {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #eff;
}
.highcharts-data-table caption {
border-bottom: none;
font-size: 1.1em;
font-weight: bold;
}

Answer 2

I think it would be easier for you to use the table generated by the export-data.js module.
It can be called like this, if you want to always show it:
chart: {
events: {
load: function() {
this.viewData()
}
},
...
}
Then you can style that table like a normal html table, e.g:
.highcharts-data-table thead {
background-color: #aaa;
}
To find the average you can calculate that based on the values on the html table and call it after the viewData function has been called, see example.
function getAverages(rowVals) {
let averages = ''
rowVals.forEach(function(arr, i) {
if (i != 0)
averages += '<td>' + (arr.reduce(function(a, b) {
return a + b;
}) / arr.length).toFixed(1) + '</td>'
});
return averages
}
function addHtmlTableAverage() {
var table = $('.highcharts-data-table table')[0],
avgVal, sumVal = 0,
rowCount = table.rows.length - 1,
rowVals = [
[]
]; // minus the header
for (var i = 1; i < table.rows.length; i++) {
for (let j = 1; j < table.rows[i].cells.length; j++) {
if (rowVals[j]) {
rowVals[j].push(parseFloat(table.rows[i].cells[j].innerHTML))
} else {
rowVals.push([parseFloat(table.rows[i].cells[j].innerHTML)])
}
}
}
$('.highcharts-data-table table > tbody:last')
.append('<tr class="averages"><td><b>Avg</b></td>' +
getAverages(rowVals) +
"</tr>")
}
/**
* Create the chart
*/
window.chart = Highcharts.chart('container', {
chart: {
events: {
load: function() {
this.viewData()
addHtmlTableAverage()
}
},
borderWidth: 2,
width: 600,
height: 300
},
title: {
text: 'Average monthly temperatures'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
#container {
margin-top: 20px;
}
.highcharts-data-table thead {
background-color: #aaa;
}
.averages td {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
Working example: http://jsfiddle.net/ewolden/6gh05usq/2/

Answer 3

Every item you want to add to the table you need to generate. For example thead background: http://jsfiddle.net/BlackLabel/0behnswa/
Snippet:
// Apply thead background:
renderer.rect(
cellLeft,
tableTop + cellPadding,
colWidth,
rowHeight
)
.attr({
fill: 'rgba(150, 150, 150, 0.5)'
})
.add()
In short, you need to play around with code to modify it the way you wan to.
For example, remove parts of code that are responsible to generate empty cell: http://jsfiddle.net/BlackLabel/0behnswa/2/
The big part is "responsive" table. This is SVG, that means you need to write all responsive options. On top, you can find options to configure:
// user options
var tableTop = 310,
colWidth = 100,
tableLeft = 20,
rowHeight = 20,
cellPadding = 2.5,
...
Those are fixed numbers, you need to calculate them.