Features — Mobile — Recipes — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/features/mobile/recipes

Mobile Chart-Family Recipes

Mobile recipes are not just smaller dimensions. They return desktop-safe chart props, breakpoint-scoped responsive rules, mobile interaction policy, and mobile semantics for a family of charts. The profile and density options tune the transform without deleting author intent.

ProfileDensity

Line recipe

Responsive rule sets exact axes, mobile margin, labels, and annotation budget.

Phone view preserves trend, endpoint, direct labels, and touch detail.

Weeks shown

Start: 1End: 8

Scatterplot recipe

Point radius, opacity, hit radius, exact axes, and annotation budget respond to density.

Series

Recipe output

The props object is safe to spread into a desktop chart. Mobile-only behavior lives in responsiveRules, while the separate mobileInteraction and mobileSemanticsfields expose the same contract to containers, audits, agents, and custom renderers.

JSX

const lineMobile = mobileLineChartRecipe({ density: "compact", transformProfile: "inspect", standardControls: ["brush", "legend"], }) <LineChart {...lineMobile.props} responsiveRules={lineMobile.responsiveRules} data={trendData} lineBy="id" xAccessor="week" yAccessor="value" /> // lineMobile.mobileInteraction and lineMobile.mobileSemantics are also // returned for ChartContainer, audits, portable specs, and agents. The // responsive rule applies them to the chart at the configured breakpoint.

JSON

{ "props": { "showLegend": false, "directLabel": true, "lineWidth": 2.5, "showPoints": false, "autoPlaceAnnotations": { "mobile": { "strategy": "callout-list", "maxAnnotations": 2, "maxCalloutItems": 4, "progressiveDisclosure": true, "preferShortText": true } } }, "responsiveRules": [ { "id": "line-mobile", "description": "Apply Semiotic's mobile line recipe at phone width.", "when": { "maxWidth": 480 }, "transform": { "mode": "mobile", "showLegend": false, "directLabel": true, "lineWidth": 2.5, "showPoints": false, "autoPlaceAnnotations": { "mobile": { "strategy": "callout-list", "maxAnnotations": 2, "maxCalloutItems": 4, "progressiveDisclosure": true, "preferShortText": true } }, "margin": { "top": 12, "right": 28, "bottom": 42, "left": 44 }, "showAxes": true, "axisExtent": "exact", "mobileInteraction": { "tapToSelect": true, "tapToLockTooltip": true, "clearSelection": "backgroundTap", "targetSize": 44, "snap": "nearestDatum", "brushHandleSize": 44, "standardControls": [ "brush", "legend" ] }, "mobileSemantics": { "strategy": "line-overview-mobile-recipe", "supportsResponsiveLayout": true, "breakpoints": [ 320, 360, 390, 430, 480, 768 ], "maxAnnotations": 2, "minimumHitTarget": 44, "summary": "Phone view preserves trend, endpoint, direct labels, and touch detail.", "interaction": { "primary": "tap", "hoverFallback": "tap-to-lock", "targetSize": 44, "alternatives": [ "range-inputs", "clear-brush", "legend-chips", "show-all-series" ] }, "labels": { "strategy": "direct", "minFontSize": 12 } } } } ], "mobileInteraction": { "tapToSelect": true, "tapToLockTooltip": true, "clearSelection": "backgroundTap", "targetSize": 44, "snap": "nearestDatum", "brushHandleSize": 44, "standardControls": [ "brush", "legend" ] }, "mobileSemantics": { "strategy": "line-overview-mobile-recipe", "supportsResponsiveLayout": true, "breakpoints": [ 320, 360, 390, 430, 480, 768 ], "maxAnnotations": 2, "minimumHitTarget": 44, "summary": "Phone view preserves trend, endpoint, direct labels, and touch detail.", "interaction": { "primary": "tap", "hoverFallback": "tap-to-lock", "targetSize": 44, "alternatives": [ "range-inputs", "clear-brush", "legend-chips", "show-all-series" ] }, "labels": { "strategy": "direct", "minFontSize": 12 } }, "networkRecipeExample": { "showLegend": false, "nodeSizeRange": [ 6, 22 ], "showLabels": false, "edgeOpacity": 0.44 } }

Where recipes stop

Recipes provide safe mobile defaults and semantics. Data-aware rollups, domain-specific aggregation, and custom brush or zoom state still belong in your application or a chart-specific adapter. Pair recipes withMobile Standard Controls when a gesture needs a visible touch alternative.

Weeks shown

Start: 1End: 8

Series