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

    Module victory-entry

    Public Victory adapter API for MAIDR.

    Provides a <MaidrVictory> wrapper component and a useVictoryAdapter hook for making Victory charts accessible through MAIDR's audio sonification, text descriptions, braille output, and keyboard navigation.

    Requires React 18 or 19 and Victory as peer dependencies. The adapter introspects the Victory chart's React children to extract data and tags the rendered SVG elements with data-maidr-victory-* attributes for highlighting.

    Supported Victory data components:

    • VictoryBar → bar chart
    • VictoryLine → line chart
    • VictoryScatter → scatter plot
    • VictoryStack → stacked bar chart
    • VictoryHistogram → histogram
    • VictoryBoxPlot → box plot
    • VictoryCandlestick → candlestick chart

    Multi-panel figures: nesting two or more <VictoryChart> components makes each chart one navigable MAIDR subplot (arrow keys move between panels, Enter drills in, Escape returns). Name panels via each chart's title prop and control the grid with the layout prop.

    import { MaidrVictory } from 'maidr/victory';
    import { VictoryAxis, VictoryBar, VictoryChart } from 'victory';

    function AccessibleChart() {
      return (
        <MaidrVictory id="my-chart" title="Revenue by Quarter">
          <VictoryChart>
            <VictoryAxis label="Quarter" />
            <VictoryAxis dependentAxis label="Revenue ($)" />
            <VictoryBar
              data={[
                { x: 'Q1', y: 120 },
                { x: 'Q2', y: 200 },
                { x: 'Q3', y: 150 },
                { x: 'Q4', y: 300 },
              ]}
            />
          </VictoryChart>
        </MaidrVictory>
      );
    }

    import { useRef } from 'react';
    import { Maidr } from 'maidr/react';
    import { useVictoryAdapter } from 'maidr/victory';
    import { VictoryChart, VictoryLine } from 'victory';

    function AccessibleLineChart() {
      const containerRef = useRef<HTMLDivElement>(null);
      const children = (
        <VictoryChart>
          <VictoryLine data={[{ x: 1, y: 10 }, { x: 2, y: 20 }]} />
        </VictoryChart>
      );
      const maidrData = useVictoryAdapter({ id: 'trend', title: 'Trend', children }, containerRef);

      return (
        <Maidr data={maidrData}>
          <div ref={containerRef}>{children}</div>
        </Maidr>
      );
    }

    References

    computeSubplotGrid → computeSubplotGrid
    extractVictoryLayers → extractVictoryLayers
    extractVictorySubplots → extractVictorySubplots
    MaidrVictory → MaidrVictory
    toMaidrLayer → toMaidrLayer
    useVictoryAdapter → useVictoryAdapter
    MaidrVictoryProps → MaidrVictoryProps
    VictoryAdapterConfig → VictoryAdapterConfig
    VictoryComponentType → VictoryComponentType
    VictoryLayerData → VictoryLayerData
    VictoryLayerInfo → VictoryLayerInfo
    VictoryPanelLayout → VictoryPanelLayout
    VictorySubplotInfo → VictorySubplotInfo
    MaidrData → Maidr
    MaidrLayer → MaidrLayer
    MaidrSubplot → MaidrSubplot
    Orientation → Orientation
    TraceType → TraceType

    Settings

    Member Visibility

    On This Page

    References