<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

<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>

Props

Name	Type	Default	Description
`values`JS	`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 shown in a zero/empty cell in `show-values` mode.
`show-values`	`boolean`	`false`	Roomier month-grid layout with the day number and value printed 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 `฿`).