MAIDR Documentation - v4.4.0
    Preparing search index...

    Interface D3WaterfallConfig

    Configuration for binding a D3 waterfall (bridge) chart.

    A waterfall draws each step as a bar floating between the running total before it and the running total after it, so start and end are the two numbers the rect is already drawn from. The contribution (delta) is derived from them.

    kind is the one thing the binder cannot infer: an opening, closing or subtotal bar is drawn exactly like a step but contributes nothing, and only the author knows which bars those are. Supply the accessor for them; every other bar is classified from the sign of its contribution.

    bindD3Waterfall(svgElement, {
      selector: 'rect.step',
      axes: { x: 'Step', y: 'Amount' },
      x: 'label',
      kind: d => (d.isTotal ? 'total' : undefined),
    });
    interface D3WaterfallConfig {
        id?: string;
        title?: string;
        subtitle?: string;
        caption?: string;
        axes?: { x?: D3AxisInput; y?: D3AxisInput; fill?: D3AxisInput };
        format?: AxisFormat;
        autoApply?: boolean;
        selector: string;
        x?: DataAccessor<string | number>;
        start?: DataAccessor<number>;
        end?: DataAccessor<number>;
        kind?: DataAccessor<(WaterfallKind | undefined)>;
    }

    Hierarchy (View Summary)

    Index

    Properties

    id? title? subtitle? caption? axes? format? autoApply? selector x? start? end? kind?

    Properties

    id?: string

    Unique identifier for the chart. Used as the MAIDR id.

    title?: string

    Chart title displayed in text descriptions.

    subtitle?: string

    Chart subtitle.

    caption?: string

    Chart caption.

    axes?: { x?: D3AxisInput; y?: D3AxisInput; fill?: D3AxisInput }

    Axis configuration. Each axis may be provided as either a plain string (shorthand for { label: value }) or a full AxisConfig object (for per-axis format, or grid navigation on scatter).

    For heatmaps and segmented bar charts, use fill for the color/category axis; the binder maps it to the canonical z axis in the MAIDR schema.

    Type Declaration

    format?: AxisFormat

    Optional formatting configuration applied to axes that do not specify their own format. Per-axis format on AxisConfig takes precedence.

    autoApply?: boolean

    When true (the default), the binder writes the generated MAIDR schema to the SVG as a maidr-data attribute so vanilla-JS users don't need to call svg.setAttribute(...) themselves. The returned result is unchanged either way.

    Set to false if you are driving MAIDR yourself — e.g. passing the returned schema to <Maidr data={...}> or persisting it elsewhere. The React adapter (useD3Adapter, MaidrD3) forces this to false internally so it can stay in control of the schema.

    true
    selector: string

    CSS selector for the per-step elements (e.g. 'rect.step').

    x?: DataAccessor<string | number>

    Accessor for the step's label.

    'x'
    start?: DataAccessor<number>

    Accessor for the running total before the step.

    'start', falling back to from, y0, or base.

    end?: DataAccessor<number>

    Accessor for the running total after the step.

    'end', falling back to to, y1, or cumulative.

    kind?: DataAccessor<(WaterfallKind | undefined)>

    Accessor marking a bar as an opening, closing or subtotal ('total'). Returning undefined falls back to the derived kind, so d => (d.isTotal ? 'total' : undefined) marks only the totals.

    When omitted, a step is an 'increase' unless its contribution is negative, in which case it is a 'decrease'.

    Settings

    Member Visibility

    On This Page

    Properties