ColorMap

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.

 <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> 
 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),
          })),
        };
      }),
    );
  }
} 
 interface Point {
  x: number;
  y: number;
}

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

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

const m = createModel<Model>(); 
 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"; 

Series 1

Series 2

Series 3

Series 4

Series 5

How It Works

Place ColorMap above chart elements that need automatic colors
Elements use colorMap="mapName" to register with a specific color map
ColorMap assigns colors based on element names, distributing them evenly across the palette
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.