Helpers

stackSum

Computes the maximum accumulated total across all rows for a given set of keys. Use it to set the yDomain on a stacked chart in one line.

import { stackSum } from "chartlyx";

const yMax = stackSum(quarter, ["laptops", "phones", "tablets"]);

<ChartContainer
  data={quarter}
  yDomain={[0, yMax]}
  ...
>
  <StackedBar keys={["laptops", "phones", "tablets"]} />
</ChartContainer>

The container’s auto-computed domain covers only the largest single key, so without stackSum the top of the stack renders above the chart’s top edge and clips.

pickColor

Cycles through a color array by index. Wraps around when your keys exceed the palette length. Safer than colors[i], which returns undefined past the end.

import { pickColor, DEFAULT_STACK_COLORS } from "chartlyx";

// Safe for any i, even i > colors.length
const color = pickColor(DEFAULT_STACK_COLORS, i);

// Handy for building a legend from keys:
{keys.map((key, i) => (
  <div key={key}>
    <span style={{ background: pickColor(DEFAULT_STACK_COLORS, i) }} />
    {key}
  </div>
))}

DEFAULT_STACK_COLORS

A 6-color palette (Tailwind-derived) used as the default for StackedBar, StackedArea, Pie, and Radar. Import it and pass to colors, or use as a fallback in your own legend.

import { DEFAULT_STACK_COLORS } from "chartlyx";

// DEFAULT_STACK_COLORS = [
//   "#3b82f6",  // blue
//   "#10b981",  // emerald
//   "#f59e0b",  // amber
//   "#ef4444",  // red
//   "#8b5cf6",  // violet
//   "#06b6d4",  // cyan
// ]

<StackedBar keys={keys} colors={DEFAULT_STACK_COLORS} />

Swap in your own array of any length: pickColor cycles indefinitely, so shorter palettes still work with wide stacks.

KeysOfType

A TypeScript utility that filters keyof T down to the keys whose values match a given type. Powers yKey, valueKey, and other typed-key props so autocomplete only shows fields of the right shape.

import type { KeysOfType } from "chartlyx";

interface Row {
  month: string;
  revenue: number;
  runningAvg: number;
}

type NumericKey = KeysOfType<Row, number>;
// NumericKey = "revenue" | "runningAvg"

// Passing "month" here would be a compile error:
<ChartContainer<Row> yKey="revenue" ... />

Use it in your own components too, anywhere you accept a key of a specific type, KeysOfType lets you keep autocomplete honest.