<baht-bar-chart>

Bars with values. Two APIs, one element: the original groups, and the series API with series + categories. Bars are capped at 24px with a 4px rounded data-end and a square baseline; touching fills are separated by a 2px surface gap, never a border.

Where it went, with the previous period and a budget marker

<baht-bar-chart format="currency" emphasis="0"></baht-bar-chart>

<script>
  const el = document.querySelector('baht-bar-chart');
  el.categories = [
    "Food",
    "Transport",
    "Rent",
    "Fun",
    "Other"
  ];
  el.series = [
    {
      "name": "September",
      "values": [
        4200,
        1180,
        12000,
        2640,
        860
      ]
    }
  ];
  el.compare = [
    3560,
    1400,
    12000,
    1980,
    1120
  ];
  el.markers = [
    {
      "value": 4000,
      "label": "Budget"
    }
  ];
</script>

Stacked, two series

<baht-bar-chart format="currency" stacked="true"></baht-bar-chart>

<script>
  const el = document.querySelector('baht-bar-chart');
  el.categories = [
    "Jul",
    "Aug",
    "Sep"
  ];
  el.series = [
    {
      "name": "Needs",
      "values": [
        18400,
        19100,
        17800
      ]
    },
    {
      "name": "Wants",
      "values": [
        6100,
        7400,
        5900
      ]
    }
  ];
</script>

Original groups API

<baht-bar-chart></baht-bar-chart>

<script>
  const el = document.querySelector('baht-bar-chart');
  el.groups = [
    {
      "label": "P1",
      "count": 2
    },
    {
      "label": "P2",
      "count": 7
    },
    {
      "label": "P3",
      "count": 13
    },
    {
      "label": "P4",
      "count": 5
    }
  ];
</script>

Props

Name	Type	Default	Description
`groups`JS	`ChartGroup[]`	`[]`	{ label, count }[] in display order (original API)
`series`JS	`ChartSeries[]`	`[]`	{ name, values, color? }[] — takes precedence over groups
`categories`JS	`string[]`	`[]`	Category names, one per value index
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	horizontal (default) or vertical columns
`stacked`	`boolean`	`false`	Stack the series inside one band
`compare`JS	`number[]`	`[]`	Previous-period values, muted, under each bar
`compare-label`	`string`	`'Previous period'`	Names the muted compare bar in the key and the table
`markers`JS	`ChartMarker[]`	`[]`	Budget / target lines; each draws a hairline and a text label
`label-values`	`'ends' \| 'none'`	`'ends'`	ends prints the value at the bar tip
`emphasis`	`number \| null`	`null`	Index of the series (2+) or category (1) to keep colored
`color`	`string`	`''`	Single color for every bar
`label`	`string`	`''`	Accessible summary used by the vertical (graphics-only) rendering.
`empty-message`	`string`	`'No data to chart'`	Shown when there is no data
`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 `฿`).