{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "heatmap",
  "name": "Heatmap",
  "category": "Data display",
  "description": "Activity by day, or by hour and weekday, as a grid of cells whose depth of colour is the value. Hover a cell for the exact number.",
  "tags": [
    "heatmap",
    "activity calendar",
    "contribution graph",
    "calendar heatmap",
    "busy hours",
    "usage by day",
    "dashboard"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "activity heatmap",
      "calendar heatmap",
      "contribution graph",
      "busiest days",
      "usage by hour"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "chart"
    ],
    "avoid": null
  },
  "url": "https://mian.ro/components/heatmap",
  "markdownUrl": "https://mian.ro/ai/components/heatmap.md",
  "classes": [
    {
      "name": "mn-heatmap",
      "description": "On a <ul>: seven rows (Monday to Sunday), one column per week. Scrolls sideways when it does not fit."
    },
    {
      "name": "--v",
      "description": "On each cell: the value from 0 to 1."
    },
    {
      "name": "data-tip",
      "description": "On each cell: the text shown on hover (“Tue 14 Jul · 18 orders”)."
    },
    {
      "name": "mn-heatmap-hours",
      "description": "Rows of equal cells instead: set --cols (default 24) for an hour-by-weekday grid."
    },
    {
      "name": "mn-heatmap-legend",
      "description": "A “less … more” key built from the same cells."
    },
    {
      "name": "--cell · --gap",
      "description": "Cell size and spacing."
    }
  ],
  "accessibility": [
    "Colour depth alone is not readable by everyone: give the grid role=\"img\" and an aria-label that states the finding (“Busiest on Tuesdays and Thursdays”).",
    "Offer the numbers as a table or a download for anyone who needs the exact values.",
    "A colour role (mn-success, mn-accent…) on the list changes the hue."
  ],
  "examples": [
    {
      "title": "Orders per day",
      "description": null,
      "html": "<figure class=\"mn-chart\" style=\"max-width:34rem\">\n  <ul class=\"mn-heatmap\" role=\"img\" aria-label=\"Orders per day over 26 weeks: weekdays are busiest, and volume grows in the last eight weeks\"><li style=\"--v:0.00\" data-tip=\"Mon 1 Jun · 0 orders\"></li><li style=\"--v:0.17\" data-tip=\"Tue 2 Jun · 7 orders\"></li><li style=\"--v:0.30\" data-tip=\"Wed 3 Jun · 12 orders\"></li><li style=\"--v:0.45\" data-tip=\"Thu 4 Jun · 18 orders\"></li><li style=\"--v:0.25\" data-tip=\"Fri 5 Jun · 10 orders\"></li><li style=\"--v:0.17\" data-tip=\"Sat 6 Jun · 7 orders\"></li><li style=\"--v:0.10\" data-tip=\"Sun 7 Jun · 4 orders\"></li><li style=\"--v:0.13\" data-tip=\"Mon 8 Jun · 5 orders\"></li><li style=\"--v:0.78\" data-tip=\"Tue 9 Jun · 31 orders\"></li><li style=\"--v:0.63\" data-tip=\"Wed 10 Jun · 25 orders\"></li><li style=\"--v:0.15\" data-tip=\"Thu 11 Jun · 6 orders\"></li><li style=\"--v:0.05\" data-tip=\"Fri 12 Jun · 2 orders\"></li><li style=\"--v:0.05\" data-tip=\"Sat 13 Jun · 2 orders\"></li><li style=\"--v:0.13\" data-tip=\"Sun 14 Jun · 5 orders\"></li><li style=\"--v:0.03\" data-tip=\"Mon 15 Jun · 1 order\"></li><li style=\"--v:0.25\" data-tip=\"Tue 16 Jun · 10 orders\"></li><li style=\"--v:0.05\" data-tip=\"Wed 17 Jun · 2 orders\"></li><li style=\"--v:0.28\" data-tip=\"Thu 18 Jun · 11 orders\"></li><li style=\"--v:0.10\" data-tip=\"Fri 19 Jun · 4 orders\"></li><li style=\"--v:0.03\" data-tip=\"Sat 20 Jun · 1 order\"></li><li style=\"--v:0.05\" data-tip=\"Sun 21 Jun · 2 orders\"></li><li style=\"--v:0.25\" data-tip=\"Mon 22 Jun · 10 orders\"></li><li style=\"--v:0.68\" data-tip=\"Tue 23 Jun · 27 orders\"></li><li style=\"--v:0.33\" data-tip=\"Wed 24 Jun · 13 orders\"></li><li style=\"--v:0.45\" data-tip=\"Thu 25 Jun · 18 orders\"></li><li style=\"--v:0.17\" data-tip=\"Fri 26 Jun · 7 orders\"></li><li style=\"--v:0.05\" data-tip=\"Sat 27 Jun · 2 orders\"></li><li style=\"--v:0.03\" data-tip=\"Sun 28 Jun · 1 order\"></li><li style=\"--v:0.05\" data-tip=\"Mon 29 Jun · 2 orders\"></li><li style=\"--v:0.10\" data-tip=\"Tue 30 Jun · 4 orders\"></li><li style=\"--v:0.10\" data-tip=\"Wed 1 Jul · 4 orders\"></li><li style=\"--v:0.10\" data-tip=\"Thu 2 Jul · 4 orders\"></li><li style=\"--v:0.95\" data-tip=\"Fri 3 Jul · 38 orders\"></li><li style=\"--v:0.23\" data-tip=\"Sat 4 Jul · 9 orders\"></li><li style=\"--v:0.00\" data-tip=\"Sun 5 Jul · 0 orders\"></li><li style=\"--v:0.00\" data-tip=\"Mon 6 Jul · 0 orders\"></li><li style=\"--v:0.45\" data-tip=\"Tue 7 Jul · 18 orders\"></li><li style=\"--v:0.25\" data-tip=\"Wed 8 Jul · 10 orders\"></li><li style=\"--v:0.40\" data-tip=\"Thu 9 Jul · 16 orders\"></li><li style=\"--v:0.00\" data-tip=\"Fri 10 Jul · 0 orders\"></li><li style=\"--v:0.20\" data-tip=\"Sat 11 Jul · 8 orders\"></li><li style=\"--v:0.05\" data-tip=\"Sun 12 Jul · 2 orders\"></li><li style=\"--v:0.47\" data-tip=\"Mon 13 Jul · 19 orders\"></li><li style=\"--v:0.05\" data-tip=\"Tue 14 Jul · 2 orders\"></li><li style=\"--v:0.05\" data-tip=\"Wed 15 Jul · 2 orders\"></li><li style=\"--v:0.42\" data-tip=\"Thu 16 Jul · 17 orders\"></li><li style=\"--v:0.13\" data-tip=\"Fri 17 Jul · 5 orders\"></li><li style=\"--v:0.20\" data-tip=\"Sat 18 Jul · 8 orders\"></li><li style=\"--v:0.25\" data-tip=\"Sun 19 Jul · 10 orders\"></li><li style=\"--v:0.88\" data-tip=\"Mon 20 Jul · 35 orders\"></li><li style=\"--v:0.23\" data-tip=\"Tue 21 Jul · 9 orders\"></li><li style=\"--v:0.13\" data-tip=\"Wed 22 Jul · 5 orders\"></li><li style=\"--v:0.60\" data-tip=\"Thu 23 Jul · 24 orders\"></li><li style=\"--v:0.55\" data-tip=\"Fri 24 Jul · 22 orders\"></li><li style=\"--v:0.10\" data-tip=\"Sat 25 Jul · 4 orders\"></li><li style=\"--v:0.10\" data-tip=\"Sun 26 Jul · 4 orders\"></li><li style=\"--v:0.68\" data-tip=\"Mon 27 Jul · 27 orders\"></li><li style=\"--v:0.15\" data-tip=\"Tue 28 Jul · 6 orders\"></li><li style=\"--v:0.33\" data-tip=\"Wed 29 Jul · 13 orders\"></li><li style=\"--v:0.55\" data-tip=\"Thu 30 Jul · 22 orders\"></li><li style=\"--v:0.10\" data-tip=\"Fri 31 Jul · 4 orders\"></li><li style=\"--v:0.10\" data-tip=\"Sat 1 Aug · 4 orders\"></li><li style=\"--v:0.10\" data-tip=\"Sun 2 Aug · 4 orders\"></li><li style=\"--v:0.00\" data-tip=\"Mon 3 Aug · 0 orders\"></li><li style=\"--v:0.17\" data-tip=\"Tue 4 Aug · 7 orders\"></li><li style=\"--v:0.20\" data-tip=\"Wed 5 Aug · 8 orders\"></li><li style=\"--v:0.07\" data-tip=\"Thu 6 Aug · 3 orders\"></li><li style=\"--v:1.00\" data-tip=\"Fri 7 Aug · 40 orders\"></li><li style=\"--v:0.00\" data-tip=\"Sat 8 Aug · 0 orders\"></li><li style=\"--v:0.15\" data-tip=\"Sun 9 Aug · 6 orders\"></li><li style=\"--v:0.00\" data-tip=\"Mon 10 Aug · 0 orders\"></li><li style=\"--v:0.00\" data-tip=\"Tue 11 Aug · 0 orders\"></li><li style=\"--v:0.70\" data-tip=\"Wed 12 Aug · 28 orders\"></li><li style=\"--v:0.03\" data-tip=\"Thu 13 Aug · 1 order\"></li><li style=\"--v:0.13\" data-tip=\"Fri 14 Aug · 5 orders\"></li><li style=\"--v:0.10\" data-tip=\"Sat 15 Aug · 4 orders\"></li><li style=\"--v:0.05\" data-tip=\"Sun 16 Aug · 2 orders\"></li><li style=\"--v:0.23\" data-tip=\"Mon 17 Aug · 9 orders\"></li><li style=\"--v:0.17\" data-tip=\"Tue 18 Aug · 7 orders\"></li><li style=\"--v:0.03\" data-tip=\"Wed 19 Aug · 1 order\"></li><li style=\"--v:0.03\" data-tip=\"Thu 20 Aug · 1 order\"></li><li style=\"--v:0.42\" data-tip=\"Fri 21 Aug · 17 orders\"></li><li style=\"--v:0.03\" data-tip=\"Sat 22 Aug · 1 order\"></li><li style=\"--v:0.00\" data-tip=\"Sun 23 Aug · 0 orders\"></li><li style=\"--v:0.05\" data-tip=\"Mon 24 Aug · 2 orders\"></li><li style=\"--v:0.88\" data-tip=\"Tue 25 Aug · 35 orders\"></li><li style=\"--v:0.45\" data-tip=\"Wed 26 Aug · 18 orders\"></li><li style=\"--v:0.65\" data-tip=\"Thu 27 Aug · 26 orders\"></li><li style=\"--v:0.17\" data-tip=\"Fri 28 Aug · 7 orders\"></li><li style=\"--v:0.10\" data-tip=\"Sat 29 Aug · 4 orders\"></li><li style=\"--v:0.15\" data-tip=\"Sun 30 Aug · 6 orders\"></li><li style=\"--v:0.90\" data-tip=\"Mon 31 Aug · 36 orders\"></li><li style=\"--v:0.25\" data-tip=\"Tue 1 Sep · 10 orders\"></li><li style=\"--v:0.42\" data-tip=\"Wed 2 Sep · 17 orders\"></li><li style=\"--v:0.38\" data-tip=\"Thu 3 Sep · 15 orders\"></li><li style=\"--v:0.85\" data-tip=\"Fri 4 Sep · 34 orders\"></li><li style=\"--v:0.03\" data-tip=\"Sat 5 Sep · 1 order\"></li><li style=\"--v:0.03\" data-tip=\"Sun 6 Sep · 1 order\"></li><li style=\"--v:0.55\" data-tip=\"Mon 7 Sep · 22 orders\"></li><li style=\"--v:0.47\" data-tip=\"Tue 8 Sep · 19 orders\"></li><li style=\"--v:0.28\" data-tip=\"Wed 9 Sep · 11 orders\"></li><li style=\"--v:0.20\" data-tip=\"Thu 10 Sep · 8 orders\"></li><li style=\"--v:0.17\" data-tip=\"Fri 11 Sep · 7 orders\"></li><li style=\"--v:0.10\" data-tip=\"Sat 12 Sep · 4 orders\"></li><li style=\"--v:0.03\" data-tip=\"Sun 13 Sep · 1 order\"></li><li style=\"--v:0.00\" data-tip=\"Mon 14 Sep · 0 orders\"></li><li style=\"--v:0.00\" data-tip=\"Tue 15 Sep · 0 orders\"></li><li style=\"--v:0.20\" data-tip=\"Wed 16 Sep · 8 orders\"></li><li style=\"--v:0.80\" data-tip=\"Thu 17 Sep · 32 orders\"></li><li style=\"--v:0.10\" data-tip=\"Fri 18 Sep · 4 orders\"></li><li style=\"--v:0.15\" data-tip=\"Sat 19 Sep · 6 orders\"></li><li style=\"--v:0.03\" data-tip=\"Sun 20 Sep · 1 order\"></li><li style=\"--v:0.63\" data-tip=\"Mon 21 Sep · 25 orders\"></li><li style=\"--v:0.65\" data-tip=\"Tue 22 Sep · 26 orders\"></li><li style=\"--v:0.07\" data-tip=\"Wed 23 Sep · 3 orders\"></li><li style=\"--v:0.17\" data-tip=\"Thu 24 Sep · 7 orders\"></li><li style=\"--v:0.07\" data-tip=\"Fri 25 Sep · 3 orders\"></li><li style=\"--v:0.17\" data-tip=\"Sat 26 Sep · 7 orders\"></li><li style=\"--v:0.03\" data-tip=\"Sun 27 Sep · 1 order\"></li><li style=\"--v:0.40\" data-tip=\"Mon 28 Sep · 16 orders\"></li><li style=\"--v:0.10\" data-tip=\"Tue 29 Sep · 4 orders\"></li><li style=\"--v:0.50\" data-tip=\"Wed 30 Sep · 20 orders\"></li><li style=\"--v:0.82\" data-tip=\"Thu 1 Oct · 33 orders\"></li><li style=\"--v:0.95\" data-tip=\"Fri 2 Oct · 38 orders\"></li><li style=\"--v:0.03\" data-tip=\"Sat 3 Oct · 1 order\"></li><li style=\"--v:0.30\" data-tip=\"Sun 4 Oct · 12 orders\"></li><li style=\"--v:0.03\" data-tip=\"Mon 5 Oct · 1 order\"></li><li style=\"--v:1.00\" data-tip=\"Tue 6 Oct · 40 orders\"></li><li style=\"--v:0.00\" data-tip=\"Wed 7 Oct · 0 orders\"></li><li style=\"--v:0.10\" data-tip=\"Thu 8 Oct · 4 orders\"></li><li style=\"--v:0.13\" data-tip=\"Fri 9 Oct · 5 orders\"></li><li style=\"--v:0.10\" data-tip=\"Sat 10 Oct · 4 orders\"></li><li style=\"--v:0.23\" data-tip=\"Sun 11 Oct · 9 orders\"></li><li style=\"--v:0.50\" data-tip=\"Mon 12 Oct · 20 orders\"></li><li style=\"--v:0.82\" data-tip=\"Tue 13 Oct · 33 orders\"></li><li style=\"--v:0.93\" data-tip=\"Wed 14 Oct · 37 orders\"></li><li style=\"--v:0.17\" data-tip=\"Thu 15 Oct · 7 orders\"></li><li style=\"--v:0.63\" data-tip=\"Fri 16 Oct · 25 orders\"></li><li style=\"--v:0.15\" data-tip=\"Sat 17 Oct · 6 orders\"></li><li style=\"--v:0.03\" data-tip=\"Sun 18 Oct · 1 order\"></li><li style=\"--v:0.17\" data-tip=\"Mon 19 Oct · 7 orders\"></li><li style=\"--v:0.10\" data-tip=\"Tue 20 Oct · 4 orders\"></li><li style=\"--v:0.13\" data-tip=\"Wed 21 Oct · 5 orders\"></li><li style=\"--v:0.10\" data-tip=\"Thu 22 Oct · 4 orders\"></li><li style=\"--v:0.55\" data-tip=\"Fri 23 Oct · 22 orders\"></li><li style=\"--v:0.03\" data-tip=\"Sat 24 Oct · 1 order\"></li><li style=\"--v:0.10\" data-tip=\"Sun 25 Oct · 4 orders\"></li><li style=\"--v:0.28\" data-tip=\"Mon 26 Oct · 11 orders\"></li><li style=\"--v:0.38\" data-tip=\"Tue 27 Oct · 15 orders\"></li><li style=\"--v:0.23\" data-tip=\"Wed 28 Oct · 9 orders\"></li><li style=\"--v:0.40\" data-tip=\"Thu 29 Oct · 16 orders\"></li><li style=\"--v:0.55\" data-tip=\"Fri 30 Oct · 22 orders\"></li><li style=\"--v:0.33\" data-tip=\"Sat 31 Oct · 13 orders\"></li><li style=\"--v:0.28\" data-tip=\"Sun 1 Nov · 11 orders\"></li><li style=\"--v:0.40\" data-tip=\"Mon 2 Nov · 16 orders\"></li><li style=\"--v:0.28\" data-tip=\"Tue 3 Nov · 11 orders\"></li><li style=\"--v:0.57\" data-tip=\"Wed 4 Nov · 23 orders\"></li><li style=\"--v:0.07\" data-tip=\"Thu 5 Nov · 3 orders\"></li><li style=\"--v:0.10\" data-tip=\"Fri 6 Nov · 4 orders\"></li><li style=\"--v:0.30\" data-tip=\"Sat 7 Nov · 12 orders\"></li><li style=\"--v:0.28\" data-tip=\"Sun 8 Nov · 11 orders\"></li><li style=\"--v:0.38\" data-tip=\"Mon 9 Nov · 15 orders\"></li><li style=\"--v:0.57\" data-tip=\"Tue 10 Nov · 23 orders\"></li><li style=\"--v:0.28\" data-tip=\"Wed 11 Nov · 11 orders\"></li><li style=\"--v:0.70\" data-tip=\"Thu 12 Nov · 28 orders\"></li><li style=\"--v:0.28\" data-tip=\"Fri 13 Nov · 11 orders\"></li><li style=\"--v:0.23\" data-tip=\"Sat 14 Nov · 9 orders\"></li><li style=\"--v:0.20\" data-tip=\"Sun 15 Nov · 8 orders\"></li><li style=\"--v:0.15\" data-tip=\"Mon 16 Nov · 6 orders\"></li><li style=\"--v:0.15\" data-tip=\"Tue 17 Nov · 6 orders\"></li><li style=\"--v:0.75\" data-tip=\"Wed 18 Nov · 30 orders\"></li><li style=\"--v:0.17\" data-tip=\"Thu 19 Nov · 7 orders\"></li><li style=\"--v:0.07\" data-tip=\"Fri 20 Nov · 3 orders\"></li><li style=\"--v:0.10\" data-tip=\"Sat 21 Nov · 4 orders\"></li><li style=\"--v:0.07\" data-tip=\"Sun 22 Nov · 3 orders\"></li><li style=\"--v:0.33\" data-tip=\"Mon 23 Nov · 13 orders\"></li><li style=\"--v:0.10\" data-tip=\"Tue 24 Nov · 4 orders\"></li><li style=\"--v:0.23\" data-tip=\"Wed 25 Nov · 9 orders\"></li><li style=\"--v:0.80\" data-tip=\"Thu 26 Nov · 32 orders\"></li><li style=\"--v:0.72\" data-tip=\"Fri 27 Nov · 29 orders\"></li><li style=\"--v:0.28\" data-tip=\"Sat 28 Nov · 11 orders\"></li><li style=\"--v:0.23\" data-tip=\"Sun 29 Nov · 9 orders\"></li></ul>\n  <p class=\"mn-heatmap-legend\"><span>Less</span><i style=\"--v:0\"></i><i style=\"--v:.25\"></i><i style=\"--v:.5\"></i><i style=\"--v:.75\"></i><i style=\"--v:1\"></i><span>More</span></p>\n  <figcaption>1 June – 29 November 2026. Each column is a week, Monday at the top.</figcaption>\n</figure>"
    }
  ],
  "css": ".mn-heatmap { --cell: .85rem; --gap: 3px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, var(--cell)); grid-auto-columns: var(--cell); gap: var(--gap); margin: 0; padding: 2rem 0 .25rem; list-style: none; overflow-x: auto; scrollbar-width: thin; }\n.mn-heatmap > * { position: relative; border-radius: min(3px, var(--mn-radius-field)); background: color-mix(in oklab, var(--_c, var(--mn-primary)) calc(var(--v, 0) * 100%), var(--mn-surface-2)); outline: 1px solid color-mix(in oklab, var(--mn-fg) 6%, transparent); outline-offset: -1px; }\n.mn-heatmap-hours { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(var(--cols, 24), minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }\n.mn-heatmap-hours > * { aspect-ratio: 1; }\n:is(.mn-heatmap, .mn-uptime-bars) > [data-tip]:hover { z-index: 2; outline: 2px solid var(--mn-fg); outline-offset: 1px; }\n:is(.mn-heatmap, .mn-uptime-bars) > [data-tip]:hover::after {\n  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 7px); translate: -50% 0; z-index: 5;\n  padding: .3rem .5rem; border-radius: min(6px, var(--mn-radius-field)); background: var(--mn-fg); color: var(--mn-bg);\n  font: 500 .6875rem/1.2 var(--mn-font); white-space: nowrap; pointer-events: none;\n}\n:is(.mn-heatmap, .mn-uptime-bars) > [data-tip]:nth-child(-n+14):hover::after { left: 0; translate: 0 0; }\n:is(.mn-heatmap, .mn-uptime-bars) > [data-tip]:nth-last-child(-n+14):hover::after { left: auto; right: 0; translate: 0 0; }\n.mn-heatmap-legend { display: flex; align-items: center; gap: .3rem; margin: .5rem 0 0; color: var(--mn-muted); font-size: .75rem; }\n.mn-heatmap-legend i { width: .75rem; height: .75rem; border-radius: 2px; background: color-mix(in oklab, var(--_c, var(--mn-primary)) calc(var(--v, 0) * 100%), var(--mn-surface-2)); outline: 1px solid color-mix(in oklab, var(--mn-fg) 6%, transparent); outline-offset: -1px; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/heatmap.json"
  }
}