JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="result"></div>
<table id="table-sparkline">
    <thead>
        <tr>
            <th>Source</th>
            <th>Grade</th>
            <th>2010</th>
            <th>2011</th>
            <th>2012</th>
            <th>2013</th>
            <th>201401</th>
            <th>201402</th>
            <th>201403</th>
            <th>201404</th>
            <th>201405</th>
            <th>201406</th>
            <th>201407</th>
            <th>201408</th>
            <th></th>
        </tr>
    </thead>
    <tbody id="tbody-sparkline">
        <tr>
            <th>Canada</th>
            <td>Heavy Sour</td>
            <td>1031</td>
            <td>1244</td>
            <td>1210</td>
            <td>296</td>
            <td>296</td>
            <td>296</td>
            <td>296</td>
            <td>254</td>
            <td>296</td>
            <td>296</td>
            <td>296</td>
            <td>296</td>
            <td data-sparkline="1030935, 1243780, 1209886, 1318277, 1485837, 1209219, 1428709,	1452495, 1450612, 1558564, 1534030, 1556354"/>
        </tr>
        <tr>
            <th>Mexico</th>
            <td>Heavy Sour</td>
            <td>296</td>
            <td>296</td>
            <td>254</td>
            <td>296</td>
            <td>296</td>
            <td>296</td>
            <td>296</td>
            <td>254</td>
            <td>296</td>
            <td>296</td>
            <td>296</td>
            <td>296</td>
            <td data-sparkline="1030935, 1243780, 1209886, 1318277, 1485837, 1209219, 1428709,	1452495, 1450612, 1558564, 1534030, 1556354"/>
        </tr>
        <tr>
            <th>Venezuela</th>
            <td>Heavy Sour</td>
            <td>296</td>
            <td>296</td>
            <td>254</td>
            <td>296</td>
            <td>296</td>
            <td>296</td>
            <td>296</td>
            <td>254</td>
            <td>296</td>
            <td>296</td>
 ...

CSS

#result {
	text-align: right;
	color: gray;
	min-height: 2em;
}
#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>span {
	background: white;
	border: 1px solid silver;
	border-radius: 3px;
	box-shadow: 1px 1px 2px #888;
	padding: 8px;
}

JavaScript

$(function () {
    /**
     * 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 (options, callback) {
        var defaultOptions = {
            chart: {
                renderTo: (options.chart && options.chart.renderTo) || this,
                backgroundColor: null,
                borderWidth: 0,
                type: 'area',
                margin: [2, 0, 2, 0],
                width: 120,
                height: 20,
                style: {
                    overflow: 'visible'
                },
                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: {
                backgroundColor: null,
                borderWidth: 0,
                shadow: false,
                useHTML: true,
                hideDelay: 0,
                shared: true,
                padding: 0,
                positioner: function (w, h, point) {
                    return { x: point.plotX - w / 2, y: point.plotY - h};
                }
            },
            plotOptions: {
          ...