Types

ChartContainerProps

ChartContainerProps<T, XS, YS>

The prop shape for <ChartContainer>. Uses a discriminated union so xKey/x and yKey/y are mutually exclusive at the type level.

type XProps<T, XS extends ScaleType> = { xScaleType: XS } & (
  | { xKey: KeysOfType<T, ScaleInput<XS>>; x?: never }
  | { x: (d: T) => ScaleInput<XS>; xKey?: never }
);

type YProps<T, YS extends ScaleType> = { yScaleType: YS } & (
  | { yKey: KeysOfType<T, ScaleInput<YS>>; y?: never }
  | { y: (d: T) => ScaleInput<YS>; yKey?: never }
);

export type ChartContainerProps<
  T,
  XS extends ScaleType = "linear",
  YS extends ScaleType = "linear",
> = {
  data: readonly T[];
  margin?: Partial<Margin>;
  minHeight?: number;
  yDomain?: [number, number];
  children?: React.ReactNode;
} & XProps<T, XS> & YProps<T, YS>;

ChartContextValue

ChartContextValue

The context object exposed by useChartContext. Callers pass a generic T to narrow data.

export interface ChartContextValue {
  data: readonly unknown[];
  xScale: XScale;
  yScale: YScale;
  xAccessor: (d: unknown) => number | Date | string;
  yAccessor: (d: unknown) => number | Date | string;
  width: number;
  height: number;
  innerWidth: number;
  innerHeight: number;
  margin: Margin;
}

PolarChartContainerProps

PolarChartContainerProps<T>

Prop shape for <PolarChartContainer>. Uses a discriminated union that also permits neither valueKey nor value (radar case).

export type PolarChartContainerProps<T> = {
  data: readonly T[];
  padding?: number;
  innerRadius?: number;
  minHeight?: number;
  children?: React.ReactNode;
} & ValueProps<T>;

// ValueProps<T> allows:
//   { valueKey: KeysOfType<T, number>; value?: never }
//   { value: (d: T) => number; valueKey?: never }
//   { valueKey?: never; value?: never }   // radar

PolarChartContextValue

PolarChartContextValue

export interface PolarChartContextValue {
  data: readonly unknown[];
  valueAccessor: (d: unknown) => number;
  width: number;
  height: number;
  cx: number;
  cy: number;
  radius: number;
  innerRadius: number;
  padding: number;
  activeIndex: number | null;
  setActiveIndex: (i: number | null) => void;
}

Shape prop types

All shape prop types are generic over the row type T. Cartesian shapes extend a shared YOverride<T> interface for per-shape y accessor overrides.

export interface LineProps<T = unknown> extends YOverride<T> {
  stroke?: string;
  strokeWidth?: number;
  curve?: CurveType;
  animate?: boolean;
  label?: ShapeLabelRender<T>;
}

export interface AreaProps<T = unknown> extends YOverride<T> {
  fill?: string;
  fillOpacity?: number;
  stroke?: string;
  strokeWidth?: number;
  curve?: CurveType;
  animate?: boolean;
  label?: ShapeLabelRender<T>;
}

export interface BarProps<T = unknown> extends YOverride<T> {
  fill?: string;
  fillOpacity?: number;
  stroke?: string;
  strokeWidth?: number;
  radius?: number;
  baseline?: number;
  animate?: boolean;
  label?: ShapeLabelRender<T>;
}

export interface ScatterProps<T = unknown> extends YOverride<T> {
  fill?: string;
  fillOpacity?: number;
  stroke?: string;
  strokeWidth?: number;
  radius?: number;
  animate?: boolean;
  label?: ShapeLabelRender<T>;
}

export interface StackedBarProps<T = unknown> {
  keys: readonly KeysOfType<T, number>[];
  colors?: readonly string[];
  radius?: number;
  stroke?: string;
  strokeWidth?: number;
  animate?: boolean;
}

export interface StackedAreaProps<T = unknown> {
  keys: readonly KeysOfType<T, number>[];
  colors?: readonly string[];
  curve?: CurveType;
  stroke?: string;
  strokeWidth?: number;
  fillOpacity?: number;
  animate?: boolean;
}

export interface PieProps<T = unknown> {
  colors?: readonly string[];
  stroke?: string;
  strokeWidth?: number;
  label?: PieLabelRender<T>;
}

export interface RadarProps<T = unknown> {
  axes: readonly KeysOfType<T, number>[];
  maxValue?: number;
  fill?: string;
  fillOpacity?: number;
  stroke?: string;
  strokeWidth?: number;
  showPoints?: boolean;
  pointRadius?: number;
  rowIndex?: number;
  colorByIndex?: number;
}

export interface RadarGridProps {
  axesCount: number;
  rings?: number;
  stroke?: string;
  strokeWidth?: number;
  fill?: string;
  shape?: "polygon" | "circle";
}

export interface RadarAxesProps {
  axes: readonly string[];
  stroke?: string;
  strokeWidth?: number;
  labelFill?: string;
  labelFontSize?: number;
  labelOffset?: number;
}

AxisProps

AxisProps<V>

Shared shape between XAxis and YAxis. The generic V narrows the tickFormatter signature based on scale type.

export interface AxisProps<V extends TickValue = TickValue> {
  tickCount?: number;
  tickFormatter?: TickFormatter<V>;
  label?: string;
  labelOffset?: number;
  stroke?: string;
  textFill?: string;
  labelFill?: string;
}

CartesianGridProps

CartesianGridProps

export interface CartesianGridProps {
  horizontal?: boolean;
  vertical?: boolean;
  xTickCount?: number;
  yTickCount?: number;
  stroke?: string;
  strokeWidth?: number;
  strokeOpacity?: number;
  dashArray?: string;
}

TooltipProps · PolarTooltipProps

TooltipProps<T>, PolarTooltipProps<T>

export interface TooltipProps<T = unknown> {
  children: TooltipRender<T>;
  showIndicator?: boolean;
  indicatorStroke?: string;
  indicatorOpacity?: number;
  dotRadius?: number;
  dotFill?: string;
}

export interface PolarTooltipProps<T = unknown> {
  children: PolarTooltipRender<T>;
}

LegendProps · LegendItem

LegendProps, LegendItem

export interface LegendItem {
  label: string;
  color: string;
  shape?: "square" | "circle";
}

export interface LegendProps {
  items: readonly LegendItem[];
  direction?: "row" | "column";
  gap?: number;
  fontSize?: number;
  color?: string;
  chipSize?: number;
}

LinearGradientProps

LinearGradientProps

export interface LinearGradientProps {
  id: string;
  from: string;
  to: string;
  fromOpacity?: number;
  toOpacity?: number;
  direction?: "vertical" | "horizontal";
}

ShapeLabelRender · ShapeLabelRenderProps

ShapeLabelRender<T>, ShapeLabelRenderProps<T>

Signature for per-point label render props on Line, Area, Bar, and Scatter.

export interface ShapeLabelRenderProps<T> {
  x: number;
  y: number;
  datum: T;
  index: number;
}

export type ShapeLabelRender<T> = (
  props: ShapeLabelRenderProps<T>,
) => React.ReactNode;

PieLabelRender · PieLabelRenderProps

PieLabelRender<T>, PieLabelRenderProps<T>

export interface PieLabelRenderProps<T> {
  centroid: [number, number];
  cx: number;
  cy: number;
  startAngle: number;
  endAngle: number;
  datum: T;
  index: number;
}

export type PieLabelRender<T> = (
  props: PieLabelRenderProps<T>,
) => React.ReactNode;

TooltipState · TooltipRender

TooltipState<T>, TooltipRender<T>

export interface TooltipState<T> {
  x: number;
  y: number;
  datum: T;
  index: number;
}

export type TooltipRender<T> = (
  state: TooltipState<T>,
) => React.ReactNode;

PolarTooltipState · PolarTooltipRender

PolarTooltipState<T>, PolarTooltipRender<T>

export interface PolarTooltipState<T> {
  datum: T;
  index: number;
  cx: number;
  cy: number;
  radius: number;
  innerRadius: number;
}

export type PolarTooltipRender<T> = (
  state: PolarTooltipState<T>,
) => React.ReactNode;

TickValue · TickFormatter

TickValue, TickFormatter<V>

export type TickValue = number | Date | string;

export type TickFormatter<V extends TickValue = TickValue> = (
  value: V,
  index: number,
) => string;

CurveType

CurveType

Curve name accepted by Line, Area, and StackedArea.

export type CurveType = "linear" | "monotone" | "step";

ScaleType · ScaleInput

ScaleType, ScaleInput<S>

ScaleInput is a conditional type that maps a scale name to its expected input value type. Powers the discriminated union in ChartContainerProps.

export type ScaleType = "linear" | "time" | "band";

export type ScaleInput<S extends ScaleType> = S extends "linear"
  ? number
  : S extends "time"
  ? Date
  : S extends "band"
  ? string
  : never;

Margin

Margin

export interface Margin {
  top: number;
  right: number;
  bottom: number;
  left: number;
}

KeysOfType

KeysOfType<T, V>

Utility type that filters keyof T down to keys whose values extend V. Used throughout Chartlyx to constrain key props (yKey, valueKey, stack keys, radar axes).

export type KeysOfType<T, V> = {
  [K in keyof T]-?: T[K] extends V ? K : never;
}[keyof T];

// Example:
interface Row { month: string; revenue: number; runningAvg: number }
type NumericKey = KeysOfType<Row, number>;   // "revenue" | "runningAvg"
type StringKey  = KeysOfType<Row, string>;   // "month"