MAIDR JavaScript API
    Preparing search index...

    Interface MaidrRechartsProps

    Props for the MaidrRecharts wrapper component.

    interface MaidrRechartsProps {
        id: string;
        title?: string;
        subtitle?: string;
        caption?: string;
        data?: Record<string, unknown>[];
        chartType?: RechartsChartType;
        categoryAxisReversed?: boolean;
        stepDirection?: StepDirection;
        categoryAxisReversedPerPanel?: boolean[];
        xKey: string;
        yKeys?: string[];
        layers?: RechartsLayerConfig[];
        subplots?: RechartsSubplotConfig[] | RechartsSubplotConfig[][];
        columns?: number;
        xLabel?: string;
        yLabel?: string;
        orientation?: Orientation;
        fillKeys?: string[];
        binConfig?: HistogramBinConfig;
        flowConfig?: FlowLinkConfig;
        volcanoConfig?: VolcanoPointConfig;
        errorConfig?: ErrorIntervalConfig;
        forestConfig?: ForestPlotConfig;
        survivalConfig?: SurvivalCurveConfig;
        waterfallConfig?: WaterfallStepConfig;
        ganttConfig?: GanttChartConfig;
        gaugeConfig?: GaugeDialConfig;
        parallelConfig?: ParallelAxesConfig;
        ridgelineConfig?: RidgelineCurveConfig;
        hexbinConfig?: HexbinLatticeConfig;
        boxenConfig?: BoxenLadderConfig;
        selectorOverride?: string;
        children: ReactNode;
    }

    Hierarchy (View Summary)

    Index

    Properties

    id: string

    Unique identifier for the chart (used for DOM IDs).

    title?: string

    Chart title displayed in text descriptions.

    subtitle?: string

    Chart subtitle.

    caption?: string

    Chart caption.

    data?: Record<string, unknown>[]

    Recharts data array. Each item is one data point with named fields. Required in simple/composed mode. In subplot mode it acts as the default data for panels that do not provide their own data, and may be omitted when every panel does.

    chartType?: RechartsChartType

    Chart type for simple mode (single chart type with one or more series). Mutually exclusive with layers.

    categoryAxisReversed?: boolean

    Whether the axis carrying the categories is drawn from its far end.

    Not a prop an author sets: MaidrRecharts derives it by reading reversed off the <XAxis> / <YAxis> inside its own children, which is where Recharts states it and where the converter cannot otherwise see it (#1017).

    stepDirection?: StepDirection

    Which way a step curve's riser goes: 'hv' holds the level and jumps at the next sample (<Line type="stepAfter">), 'vh' jumps at the current one (type="stepBefore").

    Read for 'step' and for the area types, whose trace carries a step the same way. MaidrRecharts fills it in from the <Line> / <Area> inside its own children when a step chart does not declare one, so an author usually need not.

    Left undefined rather than defaulted when nothing says. Every curve Recharts draws has a name — hv, vh, or mid for the centred type="step" — so a default here would be substituting one of them for a config that named none, and an undeclared direction is the one case StepTrace is written to expect.

    categoryAxisReversedPerPanel?: boolean[]

    The same answer per panel, in the grid's row-major order, in subplot mode.

    A panel has its own chart and so its own axes: one verdict for the whole grid would apply the first panel's answer to every other. Derived by MaidrRecharts from each panel's own child element.

    xKey: string

    Key in data objects for x-axis values.

    yKeys?: string[]

    Keys in data objects for y-axis values (simple mode). Each key creates a separate data series. Mutually exclusive with layers.

    Layer configurations for composed charts (composed mode). Each layer defines a chart type and data key. Mutually exclusive with chartType/yKeys.

    Panel configurations for multi-panel (faceted) figures (subplot mode). Mutually exclusive with the top-level chartType and layers.

    A 2D array describes the panel grid directly in row-major visual reading order (subplots[0][0] is the top-left panel). A flat array is chunked into rows of columns panels (one single row when columns is omitted). Rows may be ragged but never empty.

    When rendering through <MaidrRecharts>, pass one Recharts chart per panel as children in the same row-major order — each child is wrapped in a generated .maidr-panel-<row>-<col> div used for per-panel highlight scoping. See RechartsSubplotConfig.panelSelector for the custom-DOM escape hatch.

    columns?: number

    Number of panels per row when subplots is a flat array. Ignored when subplots is already a 2D grid.

    xLabel?: string

    X-axis label.

    yLabel?: string

    Y-axis label.

    orientation?: Orientation

    Bar/box chart orientation. Defaults to vertical.

    fillKeys?: string[]

    Display names for each series in stacked/dodged/normalized/diverging bar charts. Maps 1:1 with yKeys — the i-th fillKey names the i-th yKey. When omitted, the yKey strings are used as fill labels.

    A dumbbell reads them as the names of its two ends. They are the content of that comparison: announced as "start" and "end", a chart of life expectancy in 1990 against 2020 tells the reader which dot they are on and not which year it is.

    binConfig?: HistogramBinConfig

    Histogram bin range configuration.

    Required when chartType is 'histogram', unless every bin's xKey label is itself a number — then each bin is read as a zero-width bin at its label. A label such as '0-10' places nothing, and a histogram carrying those without this config is refused rather than announced with a bin range nothing stated.

    flowConfig?: FlowLinkConfig

    Flow link configuration. Required when chartType is 'alluvial' or 'sankey'.

    volcanoConfig?: VolcanoPointConfig

    Point labels and cutoffs for a volcano or Manhattan plot. Used when chartType is 'volcano' or 'manhattan'.

    errorConfig?: ErrorIntervalConfig

    Interval configuration. Used when chartType is 'error_bar' or 'forest'.

    forestConfig?: ForestPlotConfig

    Forest plot configuration. Used when chartType is 'forest'.

    survivalConfig?: SurvivalCurveConfig

    Survival curve configuration. Used when chartType is 'survival'.

    waterfallConfig?: WaterfallStepConfig

    Waterfall step configuration. Used when chartType is 'waterfall'.

    ganttConfig?: GanttChartConfig

    Gantt lane configuration. Used when chartType is 'gantt'.

    gaugeConfig?: GaugeDialConfig

    Gauge range, target and bands. Required when chartType is 'gauge'.

    parallelConfig?: ParallelAxesConfig

    Axis order and raw value keys for a parallel coordinates plot. Required when chartType is 'parallel'.

    ridgelineConfig?: RidgelineCurveConfig

    Group, value and density keys for a ridgeline plot. Required when chartType is 'ridgeline'.

    hexbinConfig?: HexbinLatticeConfig

    Bin centre, count and lattice row keys for a hexbin plot. Used when chartType is 'hexbin'.

    boxenConfig?: BoxenLadderConfig

    Median, ladder and outlier keys for a boxen plot. Used when chartType is 'boxen'.

    selectorOverride?: string

    Custom CSS selector override for SVG highlighting.

    By default the adapter generates selectors from Recharts' built-in class names. For multi-series charts, CSS selectors cannot reliably distinguish between series, so highlighting is disabled.

    To enable highlighting for multi-series charts, add a custom className to each Recharts component and pass the selector here:

    <Bar className="revenue-bar" dataKey="revenue" />
    // then set selectorOverride: '.revenue-bar .recharts-bar-rectangle'
    children: ReactNode

    Recharts chart component(s) to make accessible.