# ObservationDots

> Raw observations of a box or violin as small dots (jitter already applied).

Source: https://ui.jcsoftdev.com/docs/components/observation-dots

Raw observations of a box or violin as small dots (jitter already applied).

## Import

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

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

## Usage

```tsx
export const Default: Story = {};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `points` * | `readonly { value: number; offset: number; }[]` |  |  |
| `map` * | `(value: number) => number` |  | Value to pixel along the value axis. |
| `center` * | `number` |  | Pixel of the group axis on the cross axis. |
| `horizontal` * | `boolean` |  |  |
| `color` * | `string` |  |  |
| `coloring` | `"value" \| "series"` | `"series"` | "value" grades the fill from a pale tint of `color` to `color` across `range`. |
| `range` | `readonly [number, number]` |  |  |
| `radius` | `number` | `2.6` |  |
| `dimmed` | `boolean` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-primitives-observationdots--default)
- [Graded By Value](/storybook/?path=/story/charts-primitives-observationdots--graded-by-value)
- [Dimmed](/storybook/?path=/story/charts-primitives-observationdots--dimmed)

## Source

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