Highcharts Demo export customization

author(s): Øystein Moseng

by koh_edwin

HTML

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

<div class="chart-outer">
    <div id="container"></div>
    <!-- data table is inserted here -->
</div>

CSS

.chart-outer {
    max-width: 800px;
    margin: 2em auto;
}

#container {
    height: 300px;
    margin-top: 2em;
    min-width: 380px;
}

.highcharts-table-caption {
    margin-bottom: 5px;
    font-family: sans-serif;
    font-size: 14pt;
}

.highcharts-data-table table {
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
    min-width: 100%;
    margin-top: 10px;
}

.highcharts-data-table td,
.highcharts-data-table th {
    text-align: center;
    font-family: sans-serif;
    font-size: 10pt;
    border: 1px solid silver;
    padding: 0.5em;
}

.highcharts-data-table tbody tr:nth-child(even),
.highcharts-data-table thead tr {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #eff;
}

JavaScript

const ranges = [
        [1246406400000, 14.3, 27.7],
        [1246492800000, 14.5, 27.8],
        [1246579200000, 15.5, 29.6],
        [1246665600000, 16.7, 30.7],
        [1246752000000, 16.5, 25.0],
        [1246838400000, 17.8, 25.7]
    ],
    averages = [
        [1246406400000, 21.5],
        [1246492800000, 22.1],
        [1246579200000, 23],
        [1246665600000, 23.8],
        [1246752000000, 21.4],
        [1246838400000, 21.3]
    ];

Highcharts.chart('container', {
    chart: {
        events: {
            exportData: function (event) {
                // event.dataRows is an array of rows (arrays of cells)
                // Modifying it changes the output CSV/XLS file directly
                const cols_remove=[1,3]; //this removes column1 and 2
                                         //after each loop, the matrix is reduced by 1 column
                                         //so you need to calculate the next column 2=3-1
                                         //a third column will be n=m-2
                cols_remove.forEach(col_num =>{
                    //alert('here'+col_num);
                    event.dataRows.forEach(row => row.splice(col_num, 1));
                })
                //event.dataRows.forEach((row, index) => {
                //    if (index > 0) { // Skip header row
                //        row[1] = row[1].toFixed(2) + ' units'; // Append text or format
                //    }
                //});
            }
        }
    },
    exporting: {
    //showTable: true,
        buttons: {
            contextButton: {
                menuItems: [
                    'downloadPNG', 
                    'downloadCSV', // Keep default options
                    {
                        text: 'Alert Raw Data',
                        onclick: function () {
                            alert(this.getCSV()); // Uses built-in getCSV method
                        }
         ...