# chartPalette

> The eight-slot categorical color contract shared by every chart's plotted elements, addressed everywhere through a `data-color` attribute.

```ts
import { chartPalette } from "@sdxc/ui/styles";
```

Composes the mixin painting `property` from whichever of the
CHART_COLOR_SLOT_COUNT categorical slots an element's own
`data-color` attribute names, one rule generated per slot.

## Signature

```ts
chartPalette<Node extends Element = Element>(property: "color" | "fill" | "backgroundColor", combinator?: string): MixinDescriptor<Node, [styles: CSSStyles], ElementProps>
```

Returns: A `css()` mixin ready for a host element's `mix` prop.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `property` | `"color" \| "fill" \| "backgroundColor"` | The CSS property each rule sets, read from the matching `--ui-chart-*` variable. |
| `combinator?` | `string` | Selector combinator placed between the mixin's own host and its `[data-color]` match. Defaults to `""`, matching the host itself. |

## Examples

```tsx
<span data-color={String(color)} mix={[chartPalette("color"), css({ display: "inline-block" })]} />;
```

```tsx
// A chart root painting every nested `[data-color]` descendant from one
// shared mixin.
<svg mix={[chartPalette("fill", " "), css({ display: "block" })]}>{children}</svg>;
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/styles` too.

### CHART_COLOR_SLOT_COUNT

Number of categorical color slots a chart's `--ui-chart-*` palette spans.
A series, wedge, or bar whose position in its own list outgrows this
count wraps back around to the first slot.

#### Signature

```ts
const CHART_COLOR_SLOT_COUNT = 8
```