MAIDR Documentation - v3.72.1
    Preparing search index...

    Interface RechartsAdapterConfig

    Configuration for the Recharts-to-MAIDR adapter.

    Supports three configuration modes:

    1. Simple mode — Set chartType and yKeys for a single chart type with one or more data series.
    2. Composed mode — Set layers for mixed chart types (e.g., bar + line).
    3. Subplot mode — Set subplots for multi-panel (faceted) figures made of a grid of Recharts charts.
    const config: RechartsAdapterConfig = {
      id: 'sales-chart',
      title: 'Sales by Quarter',
      data: [{ quarter: 'Q1', revenue: 100 }, { quarter: 'Q2', revenue: 200 }],
      chartType: 'bar',
      xKey: 'quarter',
      yKeys: ['revenue'],
      xLabel: 'Quarter',
      yLabel: 'Revenue ($)',
    };

    const config: RechartsAdapterConfig = {
      id: 'stacked-chart',
      title: 'Revenue by Product',
      data: [{ month: 'Jan', productA: 50, productB: 30 }],
      chartType: 'stacked_bar',
      xKey: 'month',
      yKeys: ['productA', 'productB'],
      fillKeys: ['Product A', 'Product B'],
      xLabel: 'Month',
      yLabel: 'Revenue',
    };

    const config: RechartsAdapterConfig = {
      id: 'hist-chart',
      title: 'Score Distribution',
      data: [{ bin: '0-10', count: 5, xMin: 0, xMax: 10 }],
      chartType: 'histogram',
      xKey: 'bin',
      yKeys: ['count'],
      binConfig: { xMinKey: 'xMin', xMaxKey: 'xMax' },
      xLabel: 'Score',
      yLabel: 'Frequency',
    };

    const config: RechartsAdapterConfig = {
      id: 'mixed-chart',
      title: 'Revenue and Trend',
      data: [{ month: 'Jan', revenue: 100, trend: 95 }],
      xKey: 'month',
      layers: [
        { yKey: 'revenue', chartType: 'bar', name: 'Revenue' },
        { yKey: 'trend', chartType: 'line', name: 'Trend' },
      ],
      xLabel: 'Month',
      yLabel: 'Value',
    };

    const config: RechartsAdapterConfig = {
      id: 'sales-by-region',
      title: 'Sales by Region',
      xKey: 'quarter',           // top-level fields are defaults for every panel
      yKeys: ['revenue'],
      xLabel: 'Quarter',
      yLabel: 'Revenue ($)',
      subplots: [[
        { title: 'East', chartType: 'bar', data: eastData },
        { title: 'West', chartType: 'bar', data: westData },
      ]],
    };
    interface RechartsAdapterConfig {
        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;
    }

    Hierarchy (View Summary)

    Index

    Properties

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

    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'

    Settings

    Member Visibility

    On This Page

    Properties