how to different colors to bars in sparkline chart

Question

I have drawn SparkLine bar chart with some data which is given below.

I achieved it, but now I want to draw red color for all '10' elements and green color for all '20' elements.

$(function() {
  var myvalues = [10, 20, 10, 20, 10, 20, 10, 20, 10, 20];
  $('#dynamcbar').sparkline(myvalues, {
    type: 'bar',
    barColor: 'green'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.js"></script>

<body>
  <p> Bar chart with dynamic data:
    <span id="dynamcbar">Loading..</span>
  </p>
</body>

For '10' values the bar is not coming, it is giving a line but I want a red color bar. And for 20 a green color bar.

Please check http://omnipotent.net/jquery.sparkline/#s-docs – Aman Kumar Feb 17 '17 at 11:17 — Aman Kumar, Feb 17 '17 at 11:17

score 0 · Answer 1 · answered Feb 17 '17 at 11:20

0

You just need to set a range-map like this way

  var range_map = $.range_map({
    '10:': 'red',
    '20': 'green'
  })

Check this demo http://codepen.io/8odoros/pen/pRmvZb

answered Feb 17 '17 at 11:20

Theodore K.

5,058
4
30
46

but i want red bars not lines – user7399549 Feb 17 '17 at 11:23
withsome height – user7399549 Feb 17 '17 at 11:23
for my convinent i put 10 for absent and 20 for present – user7399549 Feb 17 '17 at 11:25
Then just add `chartRangeMin: 0`, see updated demo in the link I placed in my answer – Theodore K. Feb 17 '17 at 11:28
No big deal, glad I helped. Just remember to accept and upvote ;-) – Theodore K. Feb 17 '17 at 11:31
i want to show when mouse over on 20 present and on 10 absent how can i do this – user7399549 Feb 17 '17 at 11:49
i want to show when mouse over on 20 it should display "present" and on 10 it sholu display " absent" how can i do this ??? – user7399549 Feb 17 '17 at 12:03

how to different colors to bars in sparkline chart

1 Answers1