r8r/dist/R8R.d.ts

A modern, zero-dependency radar (spider) chart for visual comparisons in React

import React from 'react';
export interface DataPoint {
    label: string;
    value: number;
    maxValue?: number;
    highlighted?: boolean;
}
export interface Dataset {
    label: string;
    values: Record<string, number>;
    color?: string;
    status?: 'hidden' | 'inactive' | 'active' | 'highlighted';
}
export type DatasetState = 'hidden' | 'inactive' | 'active' | 'highlighted';
export interface Footnote {
    label: string;
    note: string;
    highlight: string[];
}
export interface Gradient {
    type: 'gradient';
    from: string;
    to: string;
    angle?: number;
}
export type ColorOrGradient = string | Gradient;
export interface R8RProps {
    /** Array of datasets to display */
    data: Dataset[];
    /** Chart structure defining the axes */
    chart: DataPoint[];
    /** Width of the chart in pixels */
    width?: number;
    /** Theme preset ('light' | 'dark' | 'unicorn' | 'retro') */
    theme?: 'light' | 'dark' | 'unicorn' | 'retro';
    /** Background of the chart (supports any valid CSS background value) */
    backgroundColor?: string;
    /** Grid line color */
    gridColor?: string;
    /** Text color for labels and legend */
    textColor?: string;
    /** Legend background (supports any valid CSS background value) */
    legendBackgroundColor?: string;
    /** Legend text color (falls back to textColor if not provided) */
    legendTextColor?: string;
    /** Legend border color */
    legendBorderColor?: string;
    /** Array of colors for datasets (will be used if dataset doesn't specify a color) */
    colors?: (string | Gradient)[];
    /** Whether to show grid lines */
    showGrid?: boolean;
    /** Whether to show axis labels */
    showLabels?: boolean;
    /** Whether to show legend */
    showLegend?: boolean;
    /** Title for the legend (empty string hides the title) */
    legendTitle?: string;
    /** Whether to show border around the chart */
    showBorder?: boolean;
    /** Animation duration in milliseconds */
    animationDuration?: number;
    /** Border radius for dataset polygons (in pixels) */
    dataBorderRadius?: number;
    /** Custom CSS class name */
    className?: string;
    /** Custom CSS styles */
    style?: React.CSSProperties;
    /** Callback when chart configuration changes (e.g., axis highlighting) */
    onChartChange?: (updatedChart: DataPoint[]) => void;
    /** Array of footnotes to display below the chart */
    footnotes?: Footnote[];
    /** Placeholder text shown when no footnote is selected */
    placeholder?: string;
    /** Index of initially active footnote (0-based) */
    activeFootnote?: number;
}
declare const R8R: React.FC<R8RProps>;
export default R8R;