Categorical series palette

seriesColor.tsDeterministic from the series name, so a colour travels with its series across panels. Past the limit, one muted other.Copy

/**
 * Colour is a property of the series, not of its position in an array.
 *
 * Indexing by result order is the common shortcut and it means "checkout" is
 * blue on one panel and orange on the next, or changes colour when a filter
 * removes a row above it. Hashing the key fixes it for free: the same name gets
 * the same colour on every panel, every dashboard, every session.
 */
const PALETTE_SIZE = 8;

/** FNV-1a. Small, stable across runs, and not trying to be a hash function. */
function hash(key: string): number {
  let h = 0x811c9dc5;
  for (let i = 0; i < key.length; i++) {
    h ^= key.charCodeAt(i);
    h = Math.imul(h, 0x01000193);
  }
  return h >>> 0;
}

const slot = (key: string) => hash(key) % PALETTE_SIZE;

/** The tokens are HSL triplets, so the reference has to be wrapped. */
const chart = (n: number) => `hsl(var(--chart-${n + 1}))`;

/** One series on its own, with no others to collide with. */
export function seriesColor(key: string): string {
  return chart(slot(key));
}

/**
 * A set of series that share a chart. Two keys can hash to one slot, and two
 * lines in one colour is the failure this pattern exists to prevent, so a
 * collision moves the later key (in sorted order, never result order) to the
 * next free slot. That bumped key can move again if the one it collided with
 * disappears; a series that must never move gets pinned in `overrides`.
 *
 * Past the palette limit, stop colouring. "Is there a defined behaviour past
 * the palette's limit?" is a checklist item, and recycling hues is the wrong
 * answer: everything beyond the top N is folded into one muted "other".
 */
export function seriesColors(keys: string[], max = PALETTE_SIZE, overrides: Record<string, number> = {}) {
  const top = keys.slice(0, max);
  const rest = keys.slice(max);
  const taken = new Set(Object.values(overrides));
  const slots = new Map<string, number>(Object.entries(overrides));
  for (const key of [...top].sort()) {
    if (slots.has(key)) continue;
    let s = slot(key);
    while (taken.has(s)) s = (s + 1) % PALETTE_SIZE;
    taken.add(s);
    slots.set(key, s);
  }
  return {
    assigned: top.map((key) => ({ key, color: chart(slots.get(key)!) })),
    other: rest.length ? { key: `${rest.length} more`, color: "hsl(var(--muted-foreground))" } : null,
  };
}

SeriesLines.tsxA line per series, coloured by key and labelled at the line's end so there is no legend to round-trip to.Copy

import { Line, LineChart, XAxis, YAxis, LabelList } from "recharts";
import { seriesColors } from "./seriesColor";

/**
 * Several series on one chart, coloured by name and labelled at the line's
 * end. The colour comes from the key, so `checkout` is the same hue on this
 * panel, the next one, and next week. The label sits where the line stops,
 * which removes the legend round-trip and means colour is never the only
 * thing telling two lines apart.
 *
 * Past `max` series the rest are summed into one muted "other". Recycling
 * hues would give two series one colour, and that is worse than one series
 * having none.
 */
export type Series = { key: string; values: number[] };

type Props = {
  series: Series[];
  /** One per point, in order. Shown on the x axis. */
  labels: string[];
  /** Six to eight is what a person can match back across a room. */
  max?: number;
  width?: number;
  height?: number;
};

/** The label at the line's end. Rendered once, at the last point. */
const EndLabel = ({ x, y, value, index, last, fill }: { x?: number; y?: number; value?: unknown; index?: number; last: number; fill: string }) =>
  index === last && typeof x === "number" && typeof y === "number" ? (
    <text x={x + 6} y={y} dy={3} fontSize={10} fill={fill}>{String(value)}</text>
  ) : null;

export function SeriesLines({ series, labels, max = 8, width = 400, height = 160 }: Props) {
  const { assigned, other } = seriesColors(series.map((s) => s.key), max);
  const byKey = new Map(series.map((s) => [s.key, s.values]));
  const lines = assigned.map(({ key, color }) => ({ key, color, values: byKey.get(key)! }));
  if (other) {
    const tail = series.slice(max);
    lines.push({ ...other, values: labels.map((_, i) => tail.reduce((n, s) => n + s.values[i], 0)) });
  }
  const rows = labels.map((label, i) =>
    Object.fromEntries([["label", label], ...lines.map((l) => [l.key, l.values[i]])]),
  );
  const last = labels.length - 1;

  return (
    <div className="overflow-x-auto">
      <LineChart width={width} height={height} data={rows} margin={{ top: 8, right: 64, bottom: 0, left: 0 }}>
        <XAxis interval={0} dataKey="label" tickLine={false} axisLine={false} fontSize={10} stroke="hsl(var(--muted-foreground))" />
        <YAxis hide domain={[0, "dataMax"]} />
        {lines.map((l) => (
          <Line
            key={l.key}
            dataKey={l.key}
            stroke={l.color}
            strokeWidth={1.5}
            dot={false}
            isAnimationActive={false}
          >
            {/* The series name, not the value: the label replaces the legend. */}
            <LabelList dataKey={() => l.key} content={<EndLabel last={last} fill={l.color} />} />
          </Line>
        ))}
      </LineChart>
    </div>
  );
}

demo.tsxHow it is called: six routes over six hours, under the ceiling of eight.Copy

import { SeriesLines } from "./SeriesLines";

/**
 * Requests per second by route over six hours. Six series, under the ceiling,
 * each labelled where its line ends. Add a ninth and it folds into "1 more".
 */
export default function Demo() {
  return (
    <div className="rounded-lg border bg-card p-4">
      <SeriesLines
        labels={["09:00", "10:00", "11:00", "12:00", "13:00", "14:00"]}
        series={[
          { key: "checkout", values: [62, 66, 72, 74, 78, 82] },
          { key: "search", values: [54, 58, 60, 66, 66, 70] },
          { key: "cart", values: [48, 46, 52, 54, 56, 58] },
          { key: "user", values: [38, 42, 40, 44, 42, 46] },
          { key: "feed", values: [28, 26, 30, 32, 30, 34] },
          { key: "auth", values: [16, 18, 16, 20, 20, 22] },
        ]}
      />
    </div>
  );
}