<baht-heatmap>

Calendar heat for one month or N weeks: one cell per day on the sequential ramp, a weekday header, a per-cell tooltip and a “less / more” scale legend.

Spending days, September

show-tableloading

HTMLReactAngular

Copy

<baht-heatmap from="2026-09-01" to="2026-09-30" format="currency"></baht-heatmap>

<script>
  const el = document.querySelector('baht-heatmap');
  el.values = [
    {
      "date": "2026-09-01",
      "value": 420
    },
    {
      "date": "2026-09-02",
      "value": 0
    },
    {
      "date": "2026-09-03",
      "value": 180
    },
    {
      "date": "2026-09-04",
      "value": 960
    },
    {
      "date": "2026-09-05",
      "value": 240
    },
    {
      "date": "2026-09-06",
      "value": 0
    },
    {
      "date": "2026-09-07",
      "value": 1200
    },
    {
      "date": "2026-09-08",
      "value": 340
    },
    {
      "date": "2026-09-09",
      "value": 0
    },
    {
      "date": "2026-09-10",
      "value": 0
    },
    {
      "date": "2026-09-11",
      "value": 760
    },
    {
      "date": "2026-09-12",
      "value": 410
    },
    {
      "date": "2026-09-13",
      "value": 180
    },
    {
      "date": "2026-09-14",
      "value": 2100
    },
    {
      "date": "2026-09-15",
      "value": 150
    },
    {
      "date": "2026-09-16",
      "value": 0
    },
    {
      "date": "2026-09-17",
      "value": 320
    },
    {
      "date": "2026-09-18",
      "value": 480
    },
    {
      "date": "2026-09-19",
      "value": 90
    },
    {
      "date": "2026-09-20",
      "value": 0
    },
    {
      "date": "2026-09-21",
      "value": 640
    },
    {
      "date": "2026-09-22",
      "value": 1180
    },
    {
      "date": "2026-09-23",
      "value": 220
    },
    {
      "date": "2026-09-24",
      "value": 0
    },
    {
      "date": "2026-09-25",
      "value": 380
    },
    {
      "date": "2026-09-26",
      "value": 0
    },
    {
      "date": "2026-09-27",
      "value": 510
    },
    {
      "date": "2026-09-28",
      "value": 740
    },
    {
      "date": "2026-09-29",
      "value": 160
    },
    {
      "date": "2026-09-30",
      "value": 0
    }
  ];
</script>

Month grid with values

show-values swaps the compact SVG for an HTML month grid: the day number and the formatted value sit in every cell, empty days print zero-label. The two darkest steps flip to light text. Cell height is --baht-heatmap-cell-min (56px, 44px under 480px).

Spending calendar

show-valueszero-label

HTMLReactAngular

Copy

<baht-heatmap from="2026-09-01" to="2026-09-30" format="compact" show-values="true" zero-label="—" label="Spending per day, September 2026"></baht-heatmap>

<script>
  const el = document.querySelector('baht-heatmap');
  el.values = [
    {
      "date": "2026-09-01",
      "value": 420
    },
    {
      "date": "2026-09-02",
      "value": 0
    },
    {
      "date": "2026-09-03",
      "value": 180
    },
    {
      "date": "2026-09-04",
      "value": 960
    },
    {
      "date": "2026-09-05",
      "value": 240
    },
    {
      "date": "2026-09-06",
      "value": 0
    },
    {
      "date": "2026-09-07",
      "value": 1200
    },
    {
      "date": "2026-09-08",
      "value": 340
    },
    {
      "date": "2026-09-09",
      "value": 0
    },
    {
      "date": "2026-09-10",
      "value": 0
    },
    {
      "date": "2026-09-11",
      "value": 760
    },
    {
      "date": "2026-09-12",
      "value": 410
    },
    {
      "date": "2026-09-13",
      "value": 180
    },
    {
      "date": "2026-09-14",
      "value": 2100
    },
    {
      "date": "2026-09-15",
      "value": 150
    },
    {
      "date": "2026-09-16",
      "value": 0
    },
    {
      "date": "2026-09-17",
      "value": 320
    },
    {
      "date": "2026-09-18",
      "value": 480
    },
    {
      "date": "2026-09-19",
      "value": 90
    },
    {
      "date": "2026-09-20",
      "value": 0
    },
    {
      "date": "2026-09-21",
      "value": 640
    },
    {
      "date": "2026-09-22",
      "value": 1180
    },
    {
      "date": "2026-09-23",
      "value": 220
    },
    {
      "date": "2026-09-24",
      "value": 0
    },
    {
      "date": "2026-09-25",
      "value": 380
    },
    {
      "date": "2026-09-26",
      "value": 0
    },
    {
      "date": "2026-09-27",
      "value": 510
    },
    {
      "date": "2026-09-28",
      "value": 740
    },
    {
      "date": "2026-09-29",
      "value": 160
    },
    {
      "date": "2026-09-30",
      "value": 0
    }
  ];
</script>

Props

Name	Type	Default	Description
valuesJS	ChartDatePoint[]	[]	{ date: 'YYYY-MM-DD', value }[]; missing days render empty
from	string	''	First day (inclusive); defaults to the earliest value
to	string	''	Last day (inclusive); defaults to the latest value
less-label	string	'Less'	Low end of the scale legend
more-label	string	'More'	High end of the scale legend
zero-label	string	'—'	Text printed in an empty cell in show-values mode
show-values	boolean	false	HTML month grid with the day number and value in each cell
label	string	''	Accessible summary; falls back to a generated sentence
empty-message	string	'No data to chart'	Shown when there are no values
loading	boolean	false	Hold the previous render at 0.5 opacity
show-table	boolean	true	Render the "View as table" twin
format	ChartFormat	'number'	number | currency | percent | compact
currency	string	'THB'	ISO currency code for `format="currency"` (THB renders `฿`).