Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Simple Heatmap plugin
Branch: master
Failed to load latest commit information.
MIT-LICENSE.txt changing link to JSFiddle
example.html Fixed greyscale problems
hottie.jquery.json Version bump to 0.1.3
jquery.hottie.js Improve NaN handling

JQuery Hottie Plugin

"Awesome! You just saved my life."  - JQuery Hottie User.

Easy heatmap-style background-coloring for HTML elements.

In its most simple form, it parses the html contents of the selected elements and parses them as floats.

Given the following markup:

<ul id="example1">

$('ul#example1 li').hottie();

Frequently, the numeric values used for coloring will not be found in the contents of the selected elements. You can pass a function as an option which tells the plug-in how to retrieve the numeric value.

<ul id="example2">
  <li data-hist="4">Alabama</li>
  <li data-hist="3">Alaska</li>
  <li data-hist="7">Arizona</li>
  <li data-hist="1">Arkansas</li>
  <li data-hist="9">California</li>
  <li data-hist="5">Colorado</li>

$('ul#example2 li').hottie(
readValue : function(e) {
  return $(e).attr("data-hist");

You can also pass in a color scheme as an array. Low order colors correspond to low values. High order values correspond to high values.

<table id="myTable">

$("#myTable td").hottie({
    colorArray : [ 

See this all in an example on JSFiddle.

Something went wrong with that request. Please try again.