# Line (lv_line) (/widgets/line)



Overview [#overview]

The Line Widget is capable of drawing straight lines between a set of
points.

Parts and Styles [#parts-and-styles]

* <ApiLink name="LV_PART_MAIN" /> uses the [typical background](/common-widget-features/styles/overview)
  and line style properties.

Usage [#usage]

Set points [#set-points]

A Line's points have to be stored in an <ApiLink name="lv_point_precise_t" /> array and passed to
the Widget by the <ApiLink name="lv_line_set_points" display="lv_line_set_points(lines, point_array, point_cnt)" />
function.

Their coordinates can either be specified as raw pixel coordinates
(e.g. `{5, 10}`), or as a percentage of the Line's bounding box using
<ApiLink name="lv_pct" display="lv_pct(x)" />. In the latter case, the Line's width/height may need to
be set explicitly using <ApiLink name="lv_obj_set_width" /> and <ApiLink name="lv_obj_set_height" />,
as percentage values do not automatically expand the bounding box.

Auto-size [#auto-size]

By default, the Line's width and height are set to <ApiLink name="LV_SIZE_CONTENT" />.
This means it will automatically set its size to fit all the points. If
the size is set explicitly, parts on the Line may not be visible.

Invert y [#invert-y]

By default, the *y == 0* point is at the top of the Widget. It might be
counterintuitive in some cases, so the y coordinates can be inverted
with <ApiLink name="lv_line_set_y_invert" display="lv_line_set_y_invert(line, true)" />. In this case, *y == 0* will
be at the bottom of the Widget. *y invert* is disabled by default.

Events [#events]

Only [generic events](/common-widget-features/events) are sent by Line Widgets.

<Callout type="info" title="Further Reading">
  Learn more about [Events](/common-widget-features/events) emitted by all Widgets.

  Learn more about [events](/common-widget-features/events).
</Callout>

Keys [#keys]

No *Keys* are processed by Line Widgets.

<Callout type="info" title="Further Reading">
  Learn more about [Keys](/main-modules/indev/keypad).
</Callout>

Example [#example]

Simple Line [#simple-line]

<LvglExample name="lv_example_line_1" path="widgets/line/lv_example_line_1" />

API [#api]