Grid Sparklines Showcase

by stitot

HTML

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

<div id="container"></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;
}

#container {
    padding: 8px;
}

JavaScript

/* eslint-disable max-len */
Grid.grid('container', {
    dataTable: {
        columns: {
            // Data for the sparkline charts can be provided in various ways.
            // The simplest way is to provide it as a string of comma-separated
            // numbers, which will be parsed by the sparkline renderer.
            line: [
                '1, 5, 2, 4, 3, 6',
                '5, 2, 3, 4, 7, 2',
                '1, 5, 2, 3, 3, 4',
                '7, 5, 4, 3, 4, 6',
                '1, 5, 2, 6, 3, 2'
            ],
            // Data can be provided as a JSON 1D array of numbers.
            area: [
                '[5, 2, 4, 3, 5, 2]',
                '[1, 2, 3, 2, 4, 6]',
                '[7, 3, 3, 4, 5, 8]',
                '[2, 4, 3, 7, 3, 3]',
                '[10, 9, 2, 6, 5, 7]'
            ],
            // But it can also be provided as JSON array of objects.
            bar: [
                '[{ "x": 0, "y": 1, "color": "#91C8E4" }, { "x": 1, "y": 4, "color": "#749BC2" }, { "x": 2, "y": 2, "color": "#4682A9" }]',
                '[{ "x": 0, "y": 1, "color": "#91C8E4" }, { "x": 1, "y": 1, "color": "#749BC2" }, { "x": 2, "y": 1, "color": "#4682A9" }]',
                '[{ "x": 0, "y": 2, "color": "#91C8E4" }, { "x": 1, "y": 1, "color": "#749BC2" }, { "x": 2, "y": 5, "color": "#4682A9" }]',
                '[{ "x": 0, "y": 10, "color": "#91C8E4" }, { "x": 1, "y": 1, "color": "#749BC2" }, { "x": 2, "y": 10, "color": "#4682A9" }]',
                '[{ "x": 0, "y": 10, "color": "#91C8E4" }, { "x": 1, "y": 1, "color": "#749BC2" }, { "x": 2, "y": 10, "color": "#4682A9" }]'
            ],
            // Or 2D arrays, which can be interpreted using series.keys.
            column: [
                '[[0, 1, "#EAA64D"], [1, 1, "#0D5EA6"], [2, 2, "#EAA64D"], [3, 2, "#0D5EA6"], [4, 3, "#EAA64D"], [5, 3, "#0D5EA6"], [6, 4, "#EAA64D"], [7, 4, "#0D5EA6"]]',
                '[[0, 5, "#EAA64D"], [1, 3, "#0D5EA6"], [2, 4,...