View chart data using Grid

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.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>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>

<div class="demo">
    <div id="container">
        <div id="chart"></div>
    </div>
    <p class="highcharts-description">
        This demo uses Grid to show the data for a chart instead of the default data table built into the Export module.
        Using Grid to display the chart data will give you all the functionality Grid lite has to offer and a nice
        looking table out of the box.<br><br>
        Click the top right menu icon and then "View data table" to show the data using the Grid.
    </p>
</div>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css");

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

.demo {
    padding: 8px 12px;
}

.highcharts-description {
    padding: 0 8px;
}

.hide {
    display: none;
}

#grid {
    margin-top: 8px;
}

.theme-custom,
.highcharts-light .theme-custom {
    --hcg-header-background: #dff9e7;
    --hcg-header-color: #2f2b38;
    --hcg-cell-hover-background: #5749ad;
    --hcg-cell-hover-color: white;
    --hcg-border-radius: 5px;
}

@media (prefers-color-scheme: dark) {
    .theme-custom {
        --hcg-header-background: #2f2b38;
        --hcg-header-color: #dff9e7;
    }
}

.highcharts-dark .theme-custom {
    --hcg-header-background: #2f2b38;
    --hcg-header-color: #dff9e7;
}

JavaScript

const series = [
    {
        name: 'Year',
        data: [
            2010, 2011, 2012, 2013, 2014, 2015,
            2016, 2017, 2018, 2019, 2020, 2021, 2022
        ],
        xAxis: 0
    }, {
        name: 'Installation & Developers',
        data: [
            43934, 48656, 65165, 81827, 112143, 142383,
            171533, 165174, 155157, 161454, 154610, 168960, 171558
        ]
    }, {
        name: 'Manufacturing',
        data: [
            24916, 37941, 29742, 29851, 32490, 30282,
            38121, 36885, 33726, 34243, 31050, 33099, 33473
        ]
    }, {
        name: 'Sales & Distribution',
        data: [
            11744, 30000, 16005, 19771, 20185, 24377,
            32147, 30912, 29243, 29213, 25663, 28978, 30618
        ]
    }, {
        name: 'Operations & Maintenance',
        data: [
            null, null, null, null, null, null, null,
            null, 11164, 11218, 10077, 12530, 16585
        ]
    }, {
        name: 'Other',
        data: [
            21908, 5548, 8105, 11248, 8989, 11816, 18274,
            17300, 13053, 11906, 10073, 11471, 11648
        ]
    }];

let grid = null;

Highcharts.chart('chart', {

    title: {
        text: 'U.S Solar Employment Growth',
        align: 'left'
    },

    subtitle: {
        text: 'By Job Category. Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>.',
        align: 'left'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },

    xAxis: {
        accessibility: {
            rangeDescription: 'Range: 2010 to 2022'
        }
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    exporting: {
       ...