Skip to content
Fieldbook
Menu
Sign in
EN

Charts

Smooth Area Trend

Smooth Area Trend: A single series area chart with a smoothly curved top edge, a soft tinted fill, faint horizontal gridlines and a readout that follows the pointer.

Using Smooth Area Trend

Smooth Area Trend uses the wide preview frame with a light/dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

ControlTypeDefaultPreview limits
accentColorcolor#38BDF8No additional limit in the metadata.
monthsnumber6From 4 to 12; step 1
fillOpacitynumber0.35From 0.05 to 0.7; step 0.05
showGridbooleantrueNo additional limit in the metadata.
animatebooleantrueNo additional limit in the metadata.
Which frameworks are available for Smooth Area Trend?

Smooth Area Trend is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Smooth Area Trend depend on?

The React metadata lists these npm dependencies beyond React: motion, clsx, tailwind-merge.

What accessibility details are visible in Smooth Area Trend?

The React source for Smooth Area Trend includes: attributes and handlers (aria-hidden, aria-label, onKeyDown, tabIndex); explicit roles (img); key comparisons (ArrowLeft, ArrowRight, End, Escape, Home). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Smooth Area Trend handle reduced motion?

Smooth Area Trend reads the motion preference in its React source through useReducedMotion(). Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Gridline area chart component, a Fieldbook UI component in Charts.
2099Gridline area chartChartsA card-framed area chart with two overlapping filled layers, rounded axis ticks, a faint gridline and a footer line calling out the trend.
Still of the Area chart lite component, a Fieldbook UI component in Charts.
1525Area chart liteChartsA responsive SVG area chart with round axis ticks, a gradient fill, a crosshair that reads the sample under the pointer, and a draw-on wipe.
Still of the Gradient Area Chart component, a Fieldbook UI component in Charts.
1860Gradient Area ChartChartsTwo stacked monthly series drawn as smooth areas whose fills fade from a strong tint at the top edge down to nearly clear at the baseline.
Still of the Step area chart component, a Fieldbook UI component in Charts.
2276Step area chartChartsA single series area chart drawn as a staircase where each value is held flat across its slot and jumps vertically at the boundary.
Still of the Straight Segment Area Chart component, a Fieldbook UI component in Charts.
1908Straight Segment Area ChartChartsA single series area chart built from straight segments between points, so the outline reads as a sharp faceted polyline instead of a curve.
Still of the Series icon area chart component, a Fieldbook UI component in Charts.
1906Series icon area chartChartsA stacked area chart whose legend gives every series a small drawn direction glyph beside its swatch, and lets you mute a band by clicking it.