API reference

Helpers

Runtime utilities and constants exported alongside the components. All of these are tree-shakeable: import only what you use.

stackSum

stackSum<T>(data: readonly T[], keys: readonly (keyof T)[]): number

Computes the maximum accumulated total across all rows for the given key set. Non-finite values are skipped rather than counted as NaN.

import { stackSum } from "chartlyx";

const yMax = stackSum(quarter, ["laptops", "phones", "tablets"]);
// → the largest per-row sum of those three columns

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

Required when using <StackedBar> or <StackedArea>. The container’s auto-computed y-domain covers only the largest single key, so the top of the stack would otherwise clip.

pickColor

pickColor(colors: readonly string[], i: number): string

Returns colors[i % colors.length]. If the array is empty, returns "currentColor" so charts don’t render undefined-colored elements.

import { pickColor, DEFAULT_STACK_COLORS } from "chartlyx";

pickColor(DEFAULT_STACK_COLORS, 0);   // "#3b82f6"
pickColor(DEFAULT_STACK_COLORS, 6);   // wraps → "#3b82f6"
pickColor([], 3);                     // "currentColor"

DEFAULT_STACK_COLORS

DEFAULT_STACK_COLORS: readonly string[]

The 6-color default palette used by StackedBar, StackedArea, Pie, and Radar when no colors prop is provided.

import { DEFAULT_STACK_COLORS } from "chartlyx";

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

The palette is a readonly string[], so you can pass it directly to any colors prop or use it as a fallback in your own legend.

DEFAULT_MARGIN

DEFAULT_MARGIN: Margin

The default margin used by <ChartContainer>. Merged with any margin prop you pass.

import { DEFAULT_MARGIN } from "chartlyx";

// DEFAULT_MARGIN = { top: 10, right: 10, bottom: 30, left: 40 }

// Extend rather than replace:
<ChartContainer margin={{ ...DEFAULT_MARGIN, left: 60 }} ... />

VERSION

VERSION: string

The Chartlyx package version at build time. Useful for footers, about dialogs, or debug output.

import { VERSION } from "chartlyx";

console.log(VERSION); // e.g. "1.0.0"