What data format is required?

You can provide data as a JSON array of objects with 'date', 'value', and 'label' keys, or as a simple text list using the 'YYYY-MM-DD|value|label' format.

Can I use custom colors?

Yes, select the 'Custom Colors' option in the color scheme dropdown to define your own start and end colors for the intensity gradient.

Does it support years other than the current one?

Yes, you can specify any year between 2000 and 2030 in the 'Year' field to generate historical or future-projected heatmaps.

Can I display the actual values inside the cells?

Yes, enable the 'Show Values in Cells' checkbox, though this is recommended only when using larger cell sizes for better readability.

Is the heatmap interactive?

Yes, the generated heatmap includes hover tooltips that display the specific date, value, and label when you move your cursor over individual cells.

Elysia Tools

Navigation

Data Visualization

Calendar Heatmap Generator

Generate GitHub-style calendar heatmaps to visualize activity patterns over time, perfect for tracking yearly contributions, habits, or metrics

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Inputs

Options are grouped so long tools stay easier to scan.

18 options

ContentPaste or type the main input values.2

Activity DatatextareaRequiredActivity data for the calendar heatmap. Format: date|value|label (YYYY-MM-DD format)Chart TitletextOptionalTitle that will be displayed above the heatmap

SettingsAdjust formats, ranges, numbers, and modes.10

Color SchemeselectOptionalYearnumberOptionalYear for the calendar (leave empty for current year)Custom Start ColorcolorOptionalStart color for custom color scheme (requires Custom Colors selection)Custom End ColorcolorOptionalEnd color for custom color scheme (requires Custom Colors selection)Empty Day ColorcolorOptionalColor for days with no activityBorder ColorcolorOptionalBorder color for cellsCell SizenumberOptionalSize of each day cell in pixels (8-20)Cell SpacingnumberOptionalSpacing between cells in pixels (1-5)Animation DurationnumberOptionalAnimation duration in millisecondsBackground ColorcolorOptionalBackground color for the chart container

TogglesEnable or disable optional behavior.6

Show Values in CellscheckboxOptionalEnabled when checkedDisplay values inside the cells (works better with larger cells)Show Color LegendcheckboxOptionalEnabled when checkedDisplay the color intensity legendShow Month LabelscheckboxOptionalEnabled when checkedDisplay month names above the calendarShow Day LabelscheckboxOptionalEnabled when checkedDisplay day of week labelsShow StatisticscheckboxOptionalEnabled when checkedDisplay activity statistics below the chartShow TooltipscheckboxOptionalEnabled when checkedEnable hover tooltips for cells

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

Calendar Heatmap Generator

Run this tool

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Annual Coding Contribution Tracker

2. Daily Habit Consistency Dashboard

FAQ

ICS Calendar Samples

Grafana Advanced Application Samples

Web Image Processing Python Samples

Android Image Processing Java Samples

Venn Diagram Generator

Histogram Maker

Grouped Bar Chart Generator

Stream Graph Generator

Chart and Diagram Generators

Audio Encoding and Format Conversion Tools

Image Format Conversion and Animated Export Tools

JSON Interchange and Format Translation Tools