ElementStacks

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="sparkline" style="height:20px;width:120px;"></div></td>
        </tr>
        <tr>
            <th>That Category</th>
            <td>77.5%</td>
            <td><div id="bullet" style="height:30px;width:130px;"></div></td>
        </tr>
        <tr>
            <th>The Other</th>
            <td></td>
            <td><div id="sparkbar" style="height:20px;width:130px;"></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

//line chart
var chart = new Highcharts.Chart({
    chart:{renderTo:'sparkline',defaultSeriesType:'area',margin:[0,0,0,0],},
    title:{text:''},
    credits:{enabled:false},
    xAxis:{labels:{enabled:false},title:{text:''}},
    yAxis:{maxPadding:0,minPadding:0,endOnTick:false,labels:{enabled:false},title:{text:''}},
    legend:{enabled:false},
    tooltip:{enabled:false},
    plotOptions: {series:{lineWidth:1,shadow:false,states:{hover:{lineWidth:1}},marker:{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]}]
});

//bar chart
var chart = new Highcharts.Chart({
    chart:{renderTo:'sparkbar',defaultSeriesType:'column',margin:[0,0,0,0],},
    title:{text:''},
    credits:{enabled:false},
    xAxis:{labels:{enabled:false},title:{text:''},categories:[]},
    yAxis:{maxPadding:0,minPadding:0,endOnTick:false,labels:{enabled:false},title:{text:''}},
    legend:{enabled:false},
    tooltip:{enabled:false},
    plotOptions: {series:{pointpadding:.01, groupPadding:0,shadow:false,states:{hover:{lineWidth:1}},marker:{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]}]
});

// bullet graph
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'bullet',
        defaultSeriesType: 'bar',
        margin: [0,10,10,2],
        //height:30,
        borderWidth:0
    },
    credits: {
        enabled: false
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: [''],
        tickLength:0,
    },
    yAxis: {
        tickColor:'#ccc',
        tickWidth:1,
        tickLength:3,
        tickInterval:25,
        gridLineWidth:0,
        min: 0,
        max: 100,
        maxPadding:0,
        minPadding:0,
        endOnTick:true,
        plotBands: [{
            from: 0,
          ...