MAIDR Documentation - v3.72.1
    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;
        xKey: string;
        yKeys?: string[];
        layers?: RechartsLayerConfig[];
        subplots?: RechartsSubplotConfig[] | RechartsSubplotConfig[][];
        columns?: number;
        xLabel?: string;
        yLabel?: string;
        orientation?: Orientation;
        fillKeys?: string[];
        binConfig?: HistogramBinConfig;
        selectorOverride?: string;
        children: ReactNode;
    }

    Hierarchy (View Summary)

    Index

    Properties

    id title? subtitle? caption? data? chartType? xKey yKeys? layers? subplots? columns? xLabel? yLabel? orientation? fillKeys? binConfig? selectorOverride? children

    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.

    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.

    layers?: RechartsLayerConfig[]

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

    subplots?: RechartsSubplotConfig[] | RechartsSubplotConfig[][]

    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 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.

    binConfig?: HistogramBinConfig

    Histogram bin range configuration. Required when chartType is 'histogram'.

    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.

    Settings

    Member Visibility

    On This Page

    Properties