Fieldbook
Sign in

Charts

Value labeled line

A monthly line chart that prints every value above its own point, so the numbers can be read without hovering anything.

Using Value labeled line

A monthly line chart that prints every value above its own point, so the numbers can be read without hovering anything.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: accent, showValues, labelOffset, strokeWidth, showGrid

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

Value tagged bar chart
2286Value tagged bar chartChartsA vertical bar chart where each bar carries its own number floating just above its tip, so the plot reads correctly without checking an axis.
Category dot line
2287Category dot lineChartsA single smooth curve across five named categories where each point marker is colored from a hue-rotated accent ramp, so the markers double as the legend.
Dotted Trend Line
2294Dotted Trend LineChartsA smooth single series curve with a filled marker on every point and a ringed marker that snaps to whichever point the pointer is nearest.
Glyph Marker Line
2290Glyph Marker LineChartsA monthly trend line whose data points are drawn glyphs rather than plain dots, each one punched out of the line so the stroke appears to pass behind it.
Named point line
2291Named point lineChartsA line across five categories that prints each category name above its point instead of a number, leaving the value to the hover readout.
Outside Value Pie
2395Outside Value PieChartsA solid pie chart with bare numbers floating just outside each slice, positioned so every label reads outward from the centre with no connecting lines.