Sparkline charts

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="result"></div>
<div id="scrolling-container">
    <table id="table-sparkline">
        <thead>
            <tr>
                <th>State</th>
                <th>Income</th>
                <th>Income per quarter</th>
                <th>Costs</th>
                <th>Costs per quarter</th>
                <th>Result</th>
                <th>Result per quarter</th>
            </tr>
        </thead>
        <tbody id="tbody-sparkline">
            <tr>
                <th>Alabama</th>
                <td>254</td>
                <td data-sparkline="71, 78, 39, 66 "/>
                <td>296</td>
                <td data-sparkline="68, 52, 80, 96 "/>
                <td>-42</td>
                <td data-sparkline="3, 26, -41, -30 ; column"/>
            </tr>
            <tr>
                <th>Alaska</th>
                <td>246</td>
                <td data-sparkline="87, 44, 74, 41 "/>
                <td>181</td>
                <td data-sparkline="29, 54, 73, 25 "/>
                <td>65</td>
                <td data-sparkline="58, -10, 1, 16 ; column"/>
            </tr>
            <tr>
                <th>Arizona</th>
                <td>101</td>
                <td data-sparkline="56, 12, 8, 25 "/>
                <td>191</td>
                <td data-sparkline="69, 14, 53, 55 "/>
                <td>-90</td>
                <td data-sparkline="-13, -2, -45, -30 ; column"/>
            </tr>
            <tr>
                <th>Arkansas</th>
                <td>303</td>
                <td data-sparkline="81, 50, 78, 94 "/>
                <td>76</td>
                <td data-sparkline="36, 15, 14, 11 "/>
                <td>227</td>
                <td data-sparkline="45, 35, 64, 83 ; column"/>
            </tr>
            <tr>
                <th>California</th>
                <td>200</td>
        ...

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);
}

#result {
    text-align: left;
    color: gray;
    min-height: 2em;
    margin: 0.2em;
}

#scrolling-container {
    overflow-x: auto;
}

#table-sparkline {
    margin: 0 auto;
    border-collapse: collapse;
}

th {
    font-weight: bold;
    text-align: left;
}

td,
th {
    padding: 5px;
    border-bottom: 1px solid silver;
    height: 20px;
}

thead th {
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

.highcharts-tooltip div {
    background: white;
    border: 1px solid silver;
    border-radius: 3px;
    box-shadow: 1px 1px 2px #888;
    padding: 8px;
}

JavaScript

/**
 * Create a constructor for sparklines that takes some sensible defaults
 * and merges in the individual chart options. This function is also available
 * from the jQuery plugin as $(element).highcharts('SparkLine').
 */
Highcharts.SparkLine = function (a, b, c) {
    const hasRenderToArg = typeof a === 'string' || a.nodeName;
    let options = arguments[hasRenderToArg ? 1 : 0];
    const defaultOptions = {
        chart: {
            renderTo: (
                (options.chart && options.chart.renderTo) ||
                (hasRenderToArg && a)
            ),
            backgroundColor: null,
            borderWidth: 0,
            type: 'area',
            margin: [2, 0, 2, 0],
            width: 120,
            height: 20,
            style: {
                overflow: 'visible'
            },
            // small optimalization, saves 1-2 ms each sparkline
            skipClone: true
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        xAxis: {
            labels: {
                enabled: false
            },
            title: {
                text: null
            },
            startOnTick: false,
            endOnTick: false,
            tickPositions: []
        },
        yAxis: {
            endOnTick: false,
            startOnTick: false,
            labels: {
                enabled: false
            },
            title: {
                text: null
            },
            tickPositions: [0]
        },
        legend: {
            enabled: false
        },
        tooltip: {
            hideDelay: 0,
            outside: true,
            shared: true
        },
        plotOptions: {
            series: {
                animation: false,
                lineWidth: 1,
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                marker: {
        ...