<baht-donut-chart>

Pure-SVG donut with legend (report type “pie”). The center number defaults to the group sum. Part-to-whole at a glance only: at most six slices, the tail folded into a grey “Other”, and a 2px gap that shows the surface between touching segments.

Groups

totalcenter-labelshow-tableempty-message

HTMLReactAngular

Copy

<baht-donut-chart center-label="requests"></baht-donut-chart>

<script>
  const el = document.querySelector('baht-donut-chart');
  el.groups = [
    {
      "label": "Open",
      "count": 4
    },
    {
      "label": "In approval",
      "count": 6
    },
    {
      "label": "Closed",
      "count": 9
    }
  ];
</script>

Props

Name	Type	Default	Description
groupsJS	ChartGroup[]	[]	{ label, count }[] in legend order
total	number | null	null	Center number when it differs from the sum
color	string	''	CSS color override
center-label	string	'records'	Under the number
other-label	string	'Other'	Name of the folded tail bucket
empty-message	string	'No data to chart'	Shown when groups is empty
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 `฿`).