# ColorMap

```ts
import { ColorMap } from 'cx/charts';
```



`ColorMap` automatically assigns colors from the palette to chart elements. Elements register themselves by name and receive consistent color indices. This is useful when the number of series is dynamic.

```tsx
import { Svg } from "cx/svg";
import {
  Chart,
  NumericAxis,
  Gridlines,
  LineGraph,
  ColorMap,
  Legend,
} from "cx/charts";
import { createModel } from "cx/data";
import { Repeater, Controller } from "cx/ui";

interface Point {
  x: number;
  y: number;
}

interface Series {
  name: string;
  active: boolean;
  points: Point[];
}

interface Model {
  series: Series[];
  $record: Series;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.store.set(
      m.series,
      Array.from({ length: 5 }, (_, i) => {
        let y = 50 + Math.random() * 50;
        return {
          name: `Series ${i + 1}`,
          active: true,
          points: Array.from({ length: 20 }, (_, x) => ({
            x: x * 5,
            y: (y = y + Math.random() * 20 - 10),
          })),
        };
      }),
    );
  }
}

export default (
  <div controller={PageController}>
    <Legend />
    <Svg style="width: 100%; height: 280px">
      <Chart
        margin="20 20 40 50"
        axes={{
          x: { type: NumericAxis },
          y: { type: NumericAxis, vertical: true },
        }}
      >
        <Gridlines />
        <ColorMap />
        <Repeater records={m.series} recordAlias="$record">
          <LineGraph
            name={m.$record.name}
            active={m.$record.active}
            data={m.$record.points}
            colorMap="lines"
          />
        </Repeater>
      </Chart>
    </Svg>
  </div>
);

```

## How It Works

1. Place `ColorMap` above chart elements that need automatic colors
2. Elements use `colorMap="mapName"` to register with a specific color map
3. ColorMap assigns colors based on element names, distributing them evenly across the palette
4. Use `ColorMap.Scope` to isolate multiple color maps in nested charts

## Configuration

| Property | Type       | Default | Description                                              |
| -------- | ---------- | ------- | -------------------------------------------------------- |
| `offset` | `number`   | `0`     | Starting offset in the color palette.                    |
| `step`   | `number`   |         | Step between colors. Auto-calculated if not specified.   |
| `size`   | `number`   | `16`    | Size of the color palette.                               |
| `names`  | `string[]` |         | Pre-register names to ensure consistent color assignment.|