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

    Interface D3GaugeConfig

    Configuration for binding a D3 gauge or bullet chart.

    A drawn gauge binds only the measure — the dial's range, the target marker and the qualitative bands are drawn from numbers the author holds and the DOM does not carry, which is why they are config rather than accessors. They are also the whole reading: "73" means nothing without the range it sits in, the target it was aiming at, and the band it lands in.

    Point selector at the needle, the value arc, or the bullet's measure bar — the mark that moves with the value.

    bindD3Gauge(svgElement, {
      selector: 'rect.measure',
      axes: { x: 'Measure', y: 'Percent' },
      label: 'Conversion',
      min: 0,
      max: 100,
      target: 80,
      bands: [{ to: 50, label: 'poor' }, { to: 75, label: 'ok' }, { to: 100, label: 'good' }],
    });
    interface D3GaugeConfig {
        id?: string;
        title?: string;
        subtitle?: string;
        caption?: string;
        axes?: { x?: D3AxisInput; y?: D3AxisInput; fill?: D3AxisInput };
        format?: AxisFormat;
        autoApply?: boolean;
        selector: string;
        value?: DataAccessor<number>;
        min: number;
        max: number;
        label?: string;
        target?: number;
        bands?: GaugeBand[];
    }

    Hierarchy (View Summary)

    Index

    Properties

    id? title? subtitle? caption? axes? format? autoApply? selector value? min max label? target? bands?

    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 needle or value arc (e.g. 'path.needle').

    value?: DataAccessor<number>

    Accessor for the measure.

    'value', falling back to y, amount, measure, current, or actual. A datum that is a bare number is the measure itself.

    min: number

    Lower end of the dial.

    max: number

    Upper end of the dial.

    label?: string

    What the measure is called — 'Conversion'.

    target?: number

    The target marker a bullet chart draws, when it has one.

    bands?: GaugeBand[]

    Qualitative bands, in ascending order.

    Settings

    Member Visibility

    On This Page

    Properties