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

    Function bindD3Candlestick

    • Binds a D3.js candlestick chart to MAIDR.

      Candlestick charts show OHLC (Open, High, Low, Close) data for financial time series. This binder extracts data from D3-bound SVG elements representing candlestick bodies (typically <rect>) and optional wicks.

      Parameters

      • svg: Element

        The SVG element containing the D3 candlestick chart.

      • config: D3CandlestickConfig

        Configuration specifying the selector and data accessors.

      Returns D3BinderResult

      A D3BinderResult with the MAIDR data and generated layer.

      Timing — call after D3 has rendered. This function reads each matched element's D3-bound __data__: the OHLC + volume bound to each candlestick body. Calling it before .data().join() has run (or before the SVG is mounted) throws "No elements found for selector …" or "Property '…' not found on datum".

      Typical call sites:

      • Vanilla JS: right after your selectAll(...).data(...).join(...) chain.
      • React: inside useEffect, never during render. Prefer MaidrD3 / useD3Adapter from maidr/react, which handle the post-render timing for you.
      • Async data: inside the .then(...) of your fetch, after drawing.
      • MaidrD3
      • useD3Adapter
      const result = bindD3Candlestick(svgElement, {
        selector: 'rect.candle',
        title: 'Stock Price',
        axes: { x: 'Date', y: 'Price ($)' },
        value: 'date',
        open: 'open',
        high: 'high',
        low: 'low',
        close: 'close',
        volume: 'volume',
      });

    Settings

    Member Visibility