MobileStandardControls is the rendered counterpart tomobileInteraction.standardControls. It gives brush, zoom, and legend interactions a native form-control path for touch, keyboard, and screen-reader users.
The controls are intentionally state-driven. Semiotic does not guess how your brush or legend should mutate data; you wire the callbacks to chart props such as xExtent, filtered data, visible categories, or a geo frame ref. That keeps custom charts and built-in charts on the same path.
Campaign conversion
The mobile controls below drive real chart state.
Weeks 2-7; visible series: Search, Email.
Weeks shown
Pattern
JSX
const rangeControls = useMobileRangeControls({ domain: [1, 8], initialValue: [2, 7], step: 1, }) <ChartContainer mobile={{ breakpoint: 9999, chartMode: "mobile", standardControls: { controls: ["brush", "zoom", "legend"], brush: rangeControls.brush, zoom: rangeControls.zoom, legend: { items, onToggle }, }, }} > <LineChart data={visibleSeries} lineBy="id" xAccessor="week" yAccessor="value" xExtent={rangeControls.xExtent} /> </ChartContainer>
What remains frame-specific
Fully automatic two-way brush/zoom synchronization requires each frame family to expose the same controlled state contract. Today the reliable pattern is explicit: controls update your state, and that state flows into chart props like xExtent, filtered rows, visible series, or imperative geo zoom methods. See Mobile Recipesfor reusable starting points.