# Controlled chart editing
Edit a range window, reference line, reference band, and trading-time trend anchors through controlled callbacks.

## APIs demonstrated

- [RangeNavigator](/reference/components/chart-editing/) from `@pibbl/core/viz`
- [RangeNavigatorProps](/reference/components/chart-editing/) from `@pibbl/core/viz`
- [RangeNavigatorStyle](/reference/components/chart-editing/) from `@pibbl/core/viz`
- [EditableReferenceLine](/reference/components/chart-editing/) from `@pibbl/core/viz`
- [EditableReferenceLineProps](/reference/components/chart-editing/) from `@pibbl/core/viz`
- [EditableReferenceLineStyle](/reference/components/chart-editing/) from `@pibbl/core/viz`
- [EditableReferenceBand](/reference/components/chart-editing/) from `@pibbl/core/viz`
- [EditableReferenceBandProps](/reference/components/chart-editing/) from `@pibbl/core/viz`
- [EditableReferenceBandStyle](/reference/components/chart-editing/) from `@pibbl/core/viz`
- [EditableTrendLine](/reference/components/chart-editing/) from `@pibbl/core/viz`
- [EditableTrendLineProps](/reference/components/chart-editing/) from `@pibbl/core/viz`
- [EditableTrendLineStyle](/reference/components/chart-editing/) from `@pibbl/core/viz`
- [ChartAnchor](/reference/components/chart-editing/) from `@pibbl/core/viz`

## Complete example

[Plain source](/minimal/viz/chart-editing.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 {
  EditableReferenceBand,
  EditableReferenceLine,
  EditableTrendLine,
  LinearScale,
  RangeNavigator,
  TradingTimeScale,
  type ChartAnchor,
  type EditableReferenceBandProps,
  type EditableReferenceBandStyle,
  type EditableReferenceLineProps,
  type EditableReferenceLineStyle,
  type EditableTrendLineProps,
  type EditableTrendLineStyle,
  type RangeNavigatorProps,
  type RangeNavigatorStyle,
} from "@pibbl/core/viz";

const windowValues = signal<readonly [number, number]>([1, 3]);
const level = signal(30);
const band = signal<readonly [number, number]>([40, 55]);
const anchors = signal<readonly [ChartAnchor, ChartAnchor]>([
  { x: 1_000, y: 20 },
  { x: 3_000, y: 60 },
]);
const navigatorStyle: RangeNavigatorStyle = { fill: "#2563eb", opacity: 0.2 };
const lineStyle: EditableReferenceLineStyle = {
  stroke: "#d97706",
  hitSize: 20,
};
const bandStyle: EditableReferenceBandStyle = {
  fill: "#16a34a",
  opacity: 0.18,
};
const trendStyle: EditableTrendLineStyle = { stroke: "#7c3aed", handleSize: 7 };
const navigator: RangeNavigatorProps = {
  scale: "overview",
  values: windowValues,
  span: [140, 170],
  minimumSpan: 1,
  onChange: windowValues.set,
  style: navigatorStyle,
};
const reference: EditableReferenceLineProps = {
  scale: "price",
  direction: "horizontal",
  value: level,
  span: [30, 370],
  keyboardStep: 1,
  onChange: level.set,
  style: lineStyle,
};
const referenceBand: EditableReferenceBandProps = {
  scale: "price",
  direction: "horizontal",
  values: band,
  span: [30, 370],
  keyboardStep: 1,
  onChange: band.set,
  style: bandStyle,
};
const trend: EditableTrendLineProps = {
  xScale: "time",
  yScale: "price",
  anchors,
  keyboardStep: { x: 1_000, y: 1 },
  onChange: anchors.set,
  style: trendStyle,
};
const canvas = document.createElement("canvas");
canvas.width = 400;
canvas.height = 220;
document.body.append(canvas);
const app = pibbl(
  canvas,
  <Group>
    <TradingTimeScale
      id="time"
      timestamps={[1_000, 2_000, 3_000, 4_000]}
      range={[30, 370]}
    >
      <LinearScale id="price" domain={[0, 100]} range={[120, 20]}>
        <EditableReferenceBand {...referenceBand} />
        <EditableReferenceLine {...reference} />
        <EditableTrendLine {...trend} />
      </LinearScale>
    </TradingTimeScale>
    <LinearScale id="overview" domain={[0, 4]} range={[30, 370]}>
      <RangeNavigator {...navigator} />
    </LinearScale>
  </Group>,
);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

```

## Usage notes

- All interaction state is application-owned and fed back through controlled props.
- Trading-time anchors snap to the supplied observations.

## Documentation version

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