ElementStacks

by mark47

HTML

<script src="http://highcharts.com/js/highcharts.src.js"></script>
<script src="http://highcharts.com/js/excanvas.compiled.js"></script>
<table>
    <caption>Sparkline</caption>
    <thead>
        <tr>
            <th>Category</th>
            <th>Value</th>    
            <th>Trend</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">This Category</th>
            <td>54.4</td>
            <td><div id="container" style="height:20px;width:120px;"></div></td>
        </tr>
    </tbody>
</table>

CSS

table{
    border-collapse:collapse;
    font-family:helvetica, arial, sans-serif;
}
th{
    font-weight:bold;
    text-align:center;
    padding:5px;
}
thead th{
    border-bottom:1px solid #999;
}
td{
    padding:5px;
    vertical-align:middle;
}

JavaScript

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'area',
        margin:[0,0,0,0],
        //borderWidth:1
    },
    title:{
        text:''
    },
    credits:{
        enabled:false
    },
    xAxis: {
        labels: {
            enabled:false
        }
    },
    yAxis: {
        maxPadding:0,
        minPadding:0,
        endOnTick:false,
        labels: {
            enabled:false
        }
    },
    legend: {
        enabled:false
    },
    tooltip: {
        enabled:false
    },
    plotOptions: {
        series:{
            lineWidth:1,
            shadow:false,
            states:{
                hover:{
                    lineWidth:1
                }
            },
            marker:{
                //enabled:false,
                radius:1,
                states:{
                    hover:{
                        radius:2
                    }
                }
            }
        }
    },
    series: [{
        color:'#666',
        fillColor:'rgba(204,204,204,.25)',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        
    }]
});