LCLiveCharts
Guides

Value overlay

Large live number via DOM, not Vue re-renders

showValue

<LiveChart
  :data="data"
  :value="value"
  show-value
  value-momentum-color
  :format-value="(v) => v.toFixed(2)"
  :badge="false"
  style="height: 100%"
/>
PropDefaultRole
showValuefalseLarge centered (or layout-aware) live number
valueMomentumColorfalseTint the number with momentum green/red
formatValuev.toFixed(2)Shared with badge & tooltips

Live preview uses the shared engine via React bindings; copy the Vue snippet above.

60fps value overlay with momentum colouring.

Updates run at frame rate through a DOM node owned by the engine — toggling showValue does not force Vue to re-render every frame.

Layout tips

  • Leave vertical room if you also show windows or mode toggles (style / padding).
  • Often disable badge when the overlay is the primary readout.
  • Pair with theme so contrast holds on light and dark surfaces.

On this page