Documentation / Widgets / Visualiser / Line

Line

A polyline from a list of points - a divider, a pointer, a simple shape. The points are fixed at design time; LVGL keeps a pointer to the array rather than copying it, so the generated code stores it as a static.

Group: Visualiser · Default size: 120 × 80 · Style parts: Main

A dropped Line: a thin blue zigzag of four points.
A Line as it is dropped.
The Line settings section: Points 0,10 then 40,30 then 80,20 and more, and Invert Y ticked.
Its settings, as the example sets them.

Colour, thickness, rounded ends and dashes all come from the Main part's Line style group.

SettingDefaultWhat it does
Pointsfour pointsOne x,y per line, in pixels from the widget's top-left corner. Lines that are not a pair of whole numbers are ignored, and fewer than two points draws nothing.
Invert YoffMeasures y upward from the bottom instead of down from the top, which suits a graph drawn by hand.

Example: a graph drawn by hand

  1. Drag a Line onto the screen and name it Trend: X 40, Y 60, Width 240, Height 90.
  2. Under Line settings set Points to seven lines: 0,10, 40,30, 80,20, 120,55, 160,45, 200,80 and 240,70, and tick Invert Y so that y counts up from the bottom.
  3. Under Style settings > Line set Color to #00A152, Width to 4 and tick Rounded.
  4. Add a second Line under it for a base: Points 0,0 and 240,0, Width 2, in grey.
A thick green line climbing in steps from left to right above a thin grey base line.
Two lines: a trend and a base.
Style settings with the Line group open: Color #00A152, Width 4 and Rounded ticked, each marked as changed.
Its colour, width and ends.