# Arc (/examples/widgets/arc) Arc bind value [#arc-bind-value] An arc and a slider co-bound to one subject; moving the slider rotates the arc. Both widgets target `subject_value` via `bind_value`. The slider is the editor; the arc is a read-only visualizer. Because the binding is two-way at the widget level, the arc would also push updates back if it were interactive — but here we lock it with `clickable="false"` so it stays purely indicative. Arc change rate [#arc-change-rate] Limit how fast the value can change while dragging. change\_rate caps the maximum value change per second triggered by user input. The lower setting responds sluggishly to fast pointer gestures, while the higher setting tracks the pointer almost instantly — useful for fine-tuning versus quick-jump knobs. Arc value-changed event [#arc-value-changed-event] React to drag updates by logging and refreshing a sibling label. The arc emits `LV_EVENT_VALUE_CHANGED` continuously while it's being dragged. The handler reads the current value via `lv_arc_get_value`, logs it, and updates a label with `lv_label_set_text_fmt` — any LVGL function may be called from the event callback. Arc image indicator [#arc-image-indicator] Use bitmaps as the arc background and indicator — the arc shape is cut from each image. `arc_image_src` replaces the solid `arc_color` with pixels sampled from a bitmap, centred on the arc's centre point. Here the MAIN part uses a dark segmented-ring bitmap so the background track shows individual tiles, and the INDICATOR part uses a glowing-cyan version of the same ring so the filled portion lights up. Both images are 224×224 and match the 180×180 widget with `arc_width="23"`. Place a Widget on the arc's knob [#place-a-widget-on-the-arcs-knob] Position a label so it tracks the arc's current value angle. `lv_arc_align_obj_to_angle(arc, widget, radius_offset)` repositions `widget` so its centre sits on the same angle as the arc's current value, offset radially by `radius_offset` pixels. Called from a `LV_EVENT_VALUE_CHANGED` handler, it makes any sibling widget follow the knob — useful for a value label, a marker, or a secondary indicator. `lv_arc_rotate_obj_to_angle` does the same but also rotates the widget to point along the angle. Arc indicator modes [#arc-indicator-modes] Compare normal, reverse, and symmetrical mode side by side. Three arcs share the same min/max range and value but use different mode settings. Normal grows clockwise from min\_value, reverse grows counter-clockwise from max\_value, and symmetrical grows outward from the middle of the range — making it obvious where each mode anchors the indicator. Arc as pie-chart slices [#arc-as-pie-chart-slices] Stack five arcs at the same centre to render a coloured pie chart. Each slice is a separate `lv_arc` aligned at the same centre. `bg_start_angle` and `bg_end_angle` carve out the wedge; the slice is painted by `LV_PART_MAIN` (the bg track) — there's no need to set a value just to make an indicator cover the bg, instead we hide the indicator entirely with `arc_opa="0"` on the `indicator` selector. The MAIN style sets `arc_width` to half the radius so the band reaches the centre, and `arc_rounded="false"` flattens the end caps so adjacent slices share their seam pixels exactly (rounded caps overshoot and leave gaps). The three shared parts (thick flat-ended main, invisible indicator, invisible knob) are factored into named styles. Because position and size are style properties too, the `style_pie_main` style also pins `width`/`height`/`align` — so each `` only carries its slice angles and its colour. Arc rotation offset [#arc-rotation-offset] Rotate the whole dial around its center. The rotation attribute shifts both background and indicator angles by the same amount, keeping their relative span. The two arcs share the same bg\_start\_angle, bg\_end\_angle, and value, so only the rotation offset distinguishes them visually. Arc with explicit indicator angles [#arc-with-explicit-indicator-angles] Drive the indicator directly via start_angle and end_angle. The left arc draws the indicator the usual way, from value, mode, and range. The right arc sets start\_angle and end\_angle explicitly, which overrides the value-based drawing. This is handy for static graphics or custom dial layouts where the indicator span is not tied to a numeric value. Arc styling [#arc-styling] Style the background ring, the active indicator, and the knob. Arc has three parts: MAIN (the unfilled background ring), INDICATOR (the active arc), and KNOB. Each is styled with a named style block via `selector="main|indicator|knob"`. `arc_color`, `arc_width`, and `arc_rounded` are the line-style equivalents for ring segments; the knob uses the regular background properties since it's drawn as a fill. Arc value and range [#arc-value-and-range] Show how min_value/max_value map onto the same background arc. Two arcs with different numeric ranges share the same visible background span. The indicator length depends on (value - min\_value) / (max\_value - min\_value), so any range — including one crossing zero — produces the same relative fill.