highcharts view as table without annotation column - highcharts

Question

I have generated a bar chart with Highcharts.
On this bar chart, I'm using an annotation to mark the 50% threshold with these words: "conformité partielle".
The problem is that in the data table, I don't want an "annotations" column.
Is there a way to avoid this?
Thanks very much for your help.

Answer 1

The option to exclude from the generated table, as well as other data export formats is includeInDataExport: false.
To exclude a data series it should be added to that series object, at the top level.
To exclude annotation labels, it should be placed in the labelOptions object, inside the annotation object:
document.addEventListener('DOMContentLoaded', function () {
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],
//includeInDataExport: false
}, {
name: 'John',
data: [5, 7, 3],
}],
annotations: [{
labels: [{
point: { x: 2, y: 5, yAxis: 0 },
text: 'My annotation'
}],
labelOptions: {
includeInDataExport: false
}
}],
exporting: {
showTable: true
}
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.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" style="width:100%; height:300px;"></div>
The above is the standard solution for this question. What follows might be relevant for a larger category of related problems that
require the manipulation of the generated table in non-standard ways.
If one has to manipulate the table after its html was generated, one may add a handler for the chart's render event. The annotation can be deleted this way:
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'bar',
events: {
render() {
const tableDiv = this.dataTableDiv,
seriesLength = this.series.length;
if(tableDiv && tableDiv.querySelectorAll('thead th').length === seriesLength+2){
tableDiv.querySelectorAll('th:last-child, td:last-child, tbody>tr:last-child').forEach(el=>el.remove())
}
}
},
},
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],
}],
annotations: [{
labels: [{
point: { x: 2, y: 5, yAxis: 0 },
text: 'My annotation'
}]
}],
exporting: {
showTable: true
}
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.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" style="width:100%; height:300px;"></div>
One has to take into consideration the fact that the handler for render is typically called multiple times, including for instance when the mouse pointer moves inside the chart div - so if the table content is to be modified by addition or deletion one has to make sure that it happens only once. In this case we delete the last column and the last row of the table only when the number of rows is equal to the number of series + 2 -- this assumes that no series has {includeInDataExport: false}. Alternative conditions can be thought of, like searching for the text of the annotation.
Finally, a mention should be made for the exportData
event handler, that might be useful in some cases. The problem in this particular case is that it doesn't offer access to the table heads and indeed the argument doesn't contain anything about the annotations (although it is filled up in the same object after the execution of the handler).
Since at the time when exportData handler is called, the chart's dataTableDiv was created, albeit it is empty, one can exploit it in a rather hacky manner:
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'bar',
events: {
exportData: function() {
const tableDiv = this.dataTableDiv,
seriesLength = this.series.length;
setTimeout(function(){
if(tableDiv && tableDiv.querySelectorAll('thead th').length === seriesLength+2){
tableDiv.querySelectorAll('th:last-child, td:last-child, tbody>tr:last-child').forEach(el=>el.remove())
}
}, 0);
}
}
},
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],
}],
annotations: [{
labels: [{
point: { x: 2, y: 5, yAxis: 0 },
text: 'My annotation'
}]
}],
exporting: {
showTable: true
}
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.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" style="width:100%; height:300px;"></div>