# BoxGlyph

> One box-and-whisker: IQR box, median line, whiskers with caps, optional mean diamond and outlier dots.

Source: https://ui.jcsoftdev.com/docs/components/box-glyph

One box-and-whisker: IQR box, median line, whiskers with caps, optional
mean diamond and outlier dots. Pure SVG, memoised.

## Import

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

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

## Usage

```tsx
<BoxGlyph
  stats={stats}
  map={vertical}
  center={WIDTH / 2}
  size={64}
  horizontal={false}
  variant="box"
  showMean
  showOutliers
  dimmed={false}
  active={false}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `stats` * | `BoxStats` |  |  |
| `map` * | `(value: number) => number` |  | Value to pixel along the value axis. |
| `center` * | `number` |  | Pixel of the box axis on the cross axis. |
| `size` * | `number` |  | Box thickness in pixels. |
| `horizontal` * | `boolean` |  |  |
| `color` * | `string` |  |  |
| `variant` | `"box" \| "inner"` | `"box"` | "box": soft fill and colored outline. "inner": slim dark box for violins and rainclouds. |
| `showMean` | `boolean` | `true` |  |
| `showOutliers` | `boolean` | `true` |  |
| `activeOutlier` | `number \| null` |  | Highlighted outlier value (keyboard or pointer). |
| `dimmed` | `boolean` |  |  |
| `active` | `boolean` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-primitives-boxglyph--default)
- [Horizontal](/storybook/?path=/story/charts-primitives-boxglyph--horizontal)
- [Inner Variant](/storybook/?path=/story/charts-primitives-boxglyph--inner-variant)
- [Without Mean And Outliers](/storybook/?path=/story/charts-primitives-boxglyph--without-mean-and-outliers)
- [Active](/storybook/?path=/story/charts-primitives-boxglyph--active)
- [Dimmed](/storybook/?path=/story/charts-primitives-boxglyph--dimmed)

## Source

`packages/ui/src/charts/core/distribution/marks.tsx`