Sparklines

author(s): Karol Kolodziej

by stitot

HTML

<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

@import url("https://code.highcharts.com/dashboards/css/datagrid.css");

#container {
    height: 800px;
    padding: 0;
}

.highcharts-datagrid-table tbody td {
    height: 50px;
}

.highcharts-background {
    fill: transparent;
}

@media (prefers-color-scheme: dark) {
    #container {
        background-color: #292929;
    }
}

JavaScript

const numberOfRows = 10000;

Grid.grid('container', {
    dataTable: {
        columns: {
            a: Array.from({ length: numberOfRows }, (_, i) => `A${i}`),
            b: Array.from({ length: numberOfRows }, (_, i) => `B${i}`),
            c: Array.from({ length: numberOfRows }, (_, i) => `C${i}`),
            d: Array.from({ length: numberOfRows }, () =>
                Array.from({
                    length: 10
                }, () => Math.round(Math.random() * 100))
            )
        }
    },
    rendering: {
        rows: {
            strictHeights: true
        }
    },

    events: {
        cell: {
            afterSetValue: function () {
                if (this.column.id !== 'd') {
                    return;
                }
                const rowIndex = this.row.index;

                Highcharts.chart(this.htmlElement, {
                    chart: {
                        height: 20,
                        animation: false,
                        margin: [0, 0, 0, 0],
                        events: {
                            load: function () {
                                console.log('I am loaded', rowIndex);
                            }
                        }
                    },
                    tooltip: {
                        outside: true
                    },
                    title: {
                        text: ''
                    },
                    credits: {
                        enabled: false
                    },
                    xAxis: {
                        visible: false
                    },
                    yAxis: {
                        visible: false
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            marker: {
                                enabled: false
                            },
                      ...