Guideline on a sparkline

Example of drawing a custom guideline over a chart

HTML

<script src="http://omnipotent.net/jquery.sparkline/2.1/jquery.sparkline.js"></script>
<p>
Sparkline appears here: <span id="sparkline">&nbsp;</span>
</p>

JavaScript

// jsfiddle configured to load jQuery Sparkline 2.1
// http://omnipotent.net/jquery.sparkline/

// Draw a sparkline with a guideline rendered over the top

// Values to render
var values = [1, 2, 0, 3, 2.5, 2.5, 4, 5, 7, 6, 3];
var chartMin = Math.min.apply(Math, values);
var chartMax = Math.max.apply(Math, values);
var chartHeight = '140px';


// Draw a sparkline for the #sparkline element
/*$('#sparkline').sparkline(values, {
    type: "bar",
    spotColor: false,
    height: chartHeight,
    chartRangeMin: chartMin,
    chartRangeMax: chartMax
});*/

// guideline line
$('#sparkline').sparkline([1, 1, 1, 1, 1, 2, 2, 2, 2, 2], {
    type: 'bar',
    barWidth: Math.round((barEl.width() / barValueCount) - barSpacing),
    barSpacing: 3,
    height: chartHeight, // size must match main chart
    composite: true,
    lineColor: '#555',
    fillColor: false, // fill would obscure the main chart
    spotColor: false,
    minSpotColor: false,
    maxSpotColor: false,
    chartRangeMin: chartMin, // must use same axis range
    chartRangeMax: chartMax
});