- Basic
- Basic Default View
- Assign Custom Triggers
- Using Trend Types
- Setup
- Dynamic Colors
- Locale (different languages)
- Themes
- Layout
- Yearly Statistics
- Description
- Extra Title Bar Buttons
- Zooming
- Make Resizable
- Views
- Map
- Line
- Chart
- Days
- Months
- Color Ranges
- Options
- Show Counts
- Remove Map Month Gaps
- Remove Map Spacing
- Single View Enabled
- Show Title Menu
- Different Month Range
- Editable Trend Types
Basic Default View
Explore a simple example of a basic Heat.js instance configured with the standard default binding options, demonstrating how to quickly set up and display an interactive heat map.
Include Files
Make sure you include the following files:
<link rel="stylesheet" href="dist/heat.js.min.css">
<script src="dist/heat.min.js"></script>
Create DOM Element
Add a new DOM element to house the Heat.js instance:
<div id="heat-map" id="heat-map" data-heat-js="{}"></div>