I'm working on a calendar display for my application. I'm using the Cal-Heatmap library, however I've modified the legend.

With this calendar library in particular, the square representing the lowest values in the legend always says less than <a number> when the user displays the title by hovering, while the square representing the highest values displays greater than <a number>. The libraries example is below.

Standard lowest value:
Less than default

Standard highest value:
Greater than default

In the version I've built for my application, there is a zero bin, then it ranges the first colored bin from 1 - <a number> (see below)

My zero bin:
zero bin

My lowest values:

My highest values:

The data I have is dynamic and since I've put the zero bin in, I've been having some issues getting the correct hover text to display. My concern however, is that the user won't know that the white values in the calendar mean the value is zero.


Do I need a zero bin to be displayed to users in the legend or would they assume that anything that isn't (in this case) green has zero for a value?

1 Answer 1


Zero values are important to include in legends and are often wrongly overlooked.

In fact, there's a case for why the zero value is the most important value in the legend to explain. Unlike other values in a legend, 'zero' can have multiple meanings...it could mean 0, no data available, not enough data, or a very small amount.
Without a legend, the ambiguity can lead to wrong user interpretation of the data.

  • For example, you have a heat map of cancer rates in the Europe, and Belgium is blank. Without a legend, you cannot tell if that means Belgium has a zero cancer rate, a small cancer rate, the study didn't include Belgium, no data is available, etc.
  • As a result, readers may come to very wrong conclusions like: "there is no cancer in Belgium!" (when in fact the country was actually excluded), or "cancer data isn't available for Belgium" (when in fact data is available and Belgium happened to have the lowest cancer rate in Europe).

For your application I suggest:

  • You are considering removing the zero value because it's hard to place the hover text. This is "allowing the tail to wag the dog". The question you should be asking (on another forum like StackOverflow) is: how do I get my hover text to be placed properly?

  • Hover-over is not a good way to present a legend. Especially one where there is a scale of values. Users can't compare the ranges...they have to hover over each one which is incredibly frustrating. It's better to have a swatch of colors, or an icon which the user can click to pop up a proper, full legend which shows each color next to each value.

Hope that helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.