# Supplied estimates and intervals
Map asymmetric supplied bounds and estimates in both orientations.

## APIs demonstrated

- [HorizontalIntervalSeries](/reference/components/interval-series/) from `@pibbl/core/viz`
- [VerticalIntervalSeries](/reference/components/interval-series/) from `@pibbl/core/viz`
- [HorizontalIntervalSeriesProps](/reference/components/interval-series/) from `@pibbl/core/viz`
- [VerticalIntervalSeriesProps](/reference/components/interval-series/) from `@pibbl/core/viz`
- [IntervalSeriesProps](/reference/components/interval-series/) from `@pibbl/core/viz`
- [IntervalSeriesStyle](/reference/components/interval-series/) from `@pibbl/core/viz`

## Complete example

[Plain source](/minimal/viz/estimate-intervals.tsx). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```tsx
import { Group, pibbl, signal } from "@pibbl/core";
import {
  BarScale,
  LinearScale,
  HorizontalIntervalSeries,
  VerticalIntervalSeries,
  type HorizontalIntervalSeriesProps,
  type VerticalIntervalSeriesProps,
  type IntervalSeriesProps,
  type IntervalSeriesStyle,
} from "@pibbl/core/viz";

const rows = [{ study: "A", estimate: 0.8, lower: 0.5, upper: 1.1 }];
const style: IntervalSeriesStyle = { radius: 4, capSize: 8, stroke: "#087f8c" };
const shared: IntervalSeriesProps<(typeof rows)[number]> = {
  data: signal(rows),
  category: "study",
  estimate: "estimate",
  lower: "lower",
  upper: "upper",
  categoryScale: "study",
  valueScale: "effect",
  style,
};
const horizontal: HorizontalIntervalSeriesProps<(typeof rows)[number]> = shared;
const vertical: VerticalIntervalSeriesProps<(typeof rows)[number]> = shared;
const canvas = document.createElement("canvas");
canvas.width = 400;
canvas.height = 300;
document.body.append(canvas);
const app = pibbl(
  canvas,
  <Group>
    <BarScale id="study" domain={["A"]} range={[30, 90]}>
      <LinearScale id="effect" domain={[0, 1.5]} range={[20, 300]}>
        <HorizontalIntervalSeries {...horizontal} />
      </LinearScale>
    </BarScale>
    <BarScale id="study" domain={["A"]} range={[30, 90]}>
      <LinearScale id="effect" domain={[0, 1.5]} range={[270, 140]}>
        <VerticalIntervalSeries {...vertical} />
      </LinearScale>
    </BarScale>
  </Group>,
);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

```

## Usage notes

- Synthetic supplied values; no statistical calculation.
- Creates its own canvas and disposes on pagehide.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision dd39ce2. ALPHA — NOT FOR PRODUCTION USE.