MAIDR Documentation - v3.65.0
    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[];
        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? 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.

    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.

    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