JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div class="demo">
    <div id="container">
        <div id="grid"></div>
        <div id="chart"></div>
    </div>
    <p class="highcharts-description">
        Shows how selecting a cell can trigger a chart update, plotting that
        column's values alongside the grid for combined data analysis.
    </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;
}

.active-column {
    background: rgba(30, 136, 229, 0.12) !important; /* Soft blue, 12% opacity */
}

#grid {
    /* display about 5 rows in the Grid */
    height: 332px;
}

JavaScript

let chart = null; // Chart is not created initially

const activeCols = new Set();

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

                    // Skip if clicked on Year column
                    if (columnId === yearColumnId) {
                        return;
                    }

                    // We get the x axis from the Year column
                    const years = grid.dataProvider
                        .getDataTable()
                        .getColumn(yearColumnId);

                    // Create chart if it doesn't exist
                    if (!chart) {
                        chart = Highcharts.chart('chart', {
                 ...