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

    Interface RechartsAdapterConfig

    Configuration for the Recharts-to-MAIDR adapter.

    Supports two 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).
    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',
    };
    interface RechartsAdapterConfig {
        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;
    }

    Hierarchy (View Summary)

    Index

    Properties

    id title? subtitle? caption? data chartType? xKey yKeys? layers? 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.

    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'

    Settings

    Member Visibility

    On This Page

    Properties