Adding legends and y-axis value on sparkline bar charts

Ritesh Kumar Gupta picture Ritesh Kumar Gupta · Jul 22, 2013 · Viewed 7.5k times · Source

I was working on sparklines bar graph. Until now I am able to draw a simple bar graph, here is the Jquery code:

values = [0,8, 15, 10, 50, 25, 35, 70];
$('.sparkline').sparkline(values, {
    type: 'bar',
    height: '200px',
    barWidth: 20,
    barSpacing: 10,
    barColor: '#56aaff',
    zeroColor: '#000000',
    enableTagOptions: true,
    tagValuesAttribute: 'data-values',
    colorMap: ["red", "green", "blue", "yellow", "orange", "#f2f2f2", "maroon", "pink"]

});

HTML

<p>
<span class="sparkline">Loading...</span>
</p>

Please refer my code at JSFIDDLE .

Now I want to add legends name as well as value of y-axis on each of the bar as shown below.

enter image description here

sun,mon,tue are legends and the value on white color at the top of the bars are y-axis value.

But I am not able to achieve it.

Any Help would be appreciated.

Answer

John Doeff picture John Doeff · Oct 4, 2014

The more I could do is pointing you to sparkline's FAQ:
http://omnipotent.net/jquery.sparkline/#s-faq

Frequently Asked Questions

Why are there no axis labels/markers?

Sparklines are intended to be small enough to fit alongside a line of text, to give a quick impression of a trend or pattern and thus don't have the paraphernalia of full sized charts. As of version 2.0 you can mouse over the sparklines to see the underlying data.