# ParliamentChart

> Hemicycle of seats: the arcs are worked out for the total, every arc gets seats in proportion to its length, and groups are laid left to right so each one reads as a wedge.

Source: https://ui.jcsoftdev.com/docs/components/parliament-chart

Hemicycle of seats: the arcs are worked out for the total, every arc gets
seats in proportion to its length, and groups are laid left to right so
each one reads as a wedge. Optional majority mark and seat total.

## Import

```ts
import { ParliamentChart } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/parliament-chart`.

## Usage

```tsx
<ParliamentChart
  title="Encuesta: servicio favorito (130 clientes)"
  data={pollVotes}
  innerRatio={0.4}
  seatShape="circle"
  majority={false}
  majorityLabel="Mayoría"
  centerLabel="votos"
  seatLabel="Votos"
  height={260}
  legend
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  |  |
| `description` | `string` |  |  |
| `data` * | `readonly Omit<UnitCategory, "icon">[]` |  | One group per entry; `value` is its number of seats (whole numbers). |
| `rows` | `number` |  | Number of arcs; computed from the seat count by default. |
| `innerRatio` | `number` | `0.4` | Radius of the innermost arc as a fraction of the outer one. |
| `seatShape` | `"circle" \| "square"` | `"circle"` |  |
| `majority` | `number \| boolean` | `false` | Draws the majority mark at the top of the arc: `true` for half the seats plus one, or an explicit number of seats. |
| `majorityLabel` | `string` | `"Majority"` | Text before the majority figure. |
| `centerLabel` | `string` |  | Word under the seat total in the middle ("escaños", "sillas"). Omit to hide the total. |
| `seatLabel` | `string` | `"Seats"` | Name of the counted thing in the tooltip and data table. |
| `height` | `number \| "fill"` | `260` |  |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `legend` | `boolean \| "top" \| "bottom"` | `true` |  |
| `tooltip` | `boolean` | `true` |  |
| `animate` | `boolean` | `true` |  |
| `loading` | `boolean` | `false` |  |
| `initialHidden` | `readonly string[]` |  |  |
| `labels` | `Partial<ChartLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-parliamentchart--default)
- [Majority line](/storybook/?path=/story/charts-parliamentchart--with-majority)
- [Square Seats](/storybook/?path=/story/charts-parliamentchart--square-seats)
- [Many seats (auto rows)](/storybook/?path=/story/charts-parliamentchart--many-seats)
- [Fixed Rows](/storybook/?path=/story/charts-parliamentchart--fixed-rows)
- [Loading](/storybook/?path=/story/charts-parliamentchart--loading)
- [Empty](/storybook/?path=/story/charts-parliamentchart--empty)
- [Narrow](/storybook/?path=/story/charts-parliamentchart--narrow)

## Source

`packages/ui/src/charts/parliament-chart/parliament-chart.tsx`