title: jQuery sparklines set colour of individual bar
body: <p>I am using <a href="http://omnipotent.net/jquery.sparkline/" rel="nofollow">jquery Sparklines</a> to make cute little bar graphs however I want to only colour the <em>last</em> bar a different colour. The code below works, but it would be nice if I could colour the bars by the tooltip names rather than by value.</p>
  
  <p>Is there a way to do that?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var values = [500, 400, 700, 900, 1200, 300, 550];
  var dates = {};
  var now = new Date();
  
  var counter = 0;
  for (var i = values.length - 1; i &gt;= 0; i--) {
    var d = moment(now).subtract(1 * i, "day").format("MMM DD");
    dates[counter] = d;
    counter++;
  }
  
  $("#bargraph1").sparkline(values, {
    type: "bar",
    barWidth: 20,
    barSpacing: 3,
    height: 100,
    tooltipFormat: "&lt;span style=\"color: {{color}}\"&gt;&amp;#9679;&lt;/span&gt; {{offset:names}} ({{value}})",
    tooltipValueLookups: {
      names: dates
    },
    colorMap: ["blue", "blue", "blue", "blue", "blue", "blue", "red"]
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.jqstooltip {
    border: none !important;
    box-sizing: content-box;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"&gt;&lt;/script&gt;
  
  &lt;span id="bargraph1"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>EDIT: can never get the code snippets to work. Heres a fiddle.js : <a href="http://jsfiddle.net/wm98qfdb/" rel="nofollow">http://jsfiddle.net/wm98qfdb/</a></p>