Chart

Faded area under line chart

Line chart with a vertical gradient fill beneath the line and styled division lines.

A 200x150 LV_CHART_TYPE_LINE chart with 10 points uses lv_chart_set_div_line_count to draw 5 horizontal and 7 vertical division lines. With LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS enabled, the LV_EVENT_DRAW_TASK_ADDED callback intercepts LV_PART_ITEMS line tasks and fills each segment below the polyline with an lv_draw_triangle and lv_draw_rect pair using a vertical gradient in the series color. LV_PART_MAIN line tasks are recolored and dashed to highlight specific grid indices.

Circular update mode with gap

Line chart that scrolls with LV_CHART_UPDATE_MODE_CIRCULAR and leaves a moving gap.

A 280x150 line chart with 80 points and one red series is prefilled with random values, then a 300 ms lv_timer appends a new value via lv_chart_set_next_value and writes LV_CHART_POINT_NONE into the two slots ahead of the write cursor. The point indicator size is set to zero, producing a circular plot with a visible moving gap.

Chart cursor

A cross-hair cursor pinned to a specific (X, Y) location on the chart.

<lv_chart-cursor> adds a cursor overlay to a chart. dir chooses which lines extend from the cursor point (all draws a full cross-hair; hor, ver, left, right, top, bottom for partial guides). pos_x/pos_y place it in chart value coordinates, so a position of 60, 70 lines up with the 60th X step and the 70-on-the-Y-axis grid line. A typical use is highlighting "today" on a time-series, or marking a threshold without baking the line into the series.

Pressed point tooltip on stacked chart

Stacked bar chart that draws a value tooltip above the pressed point.

A 280x180 LV_CHART_TYPE_STACKED chart holds three series (red, green, blue), each with 10 points. The chart subscribes to LV_EVENT_ALL: LV_EVENT_REFR_EXT_DRAW_SIZE reserves 20 px of external draw space, and LV_EVENT_DRAW_POST_END reads the pressed point via lv_chart_get_pressed_point and uses lv_draw_rect plus lv_draw_label to draw an accumulated dollar value above the stack. LV_EVENT_VALUE_CHANGED and LV_EVENT_RELEASED invalidate the chart.

Value-based bar colors

Bar chart that tints each bar between green and red based on its value.

A 260x160 LV_CHART_TYPE_BAR chart holds 24 points on one series. The chart sets LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS and subscribes to LV_EVENT_DRAW_TASK_ADDED. For each LV_PART_ITEMS fill task the callback reads the underlying Y value and replaces the fill color with an lv_color_mix of green and red proportional to the value.

Scatter chart with fading points

Scatter chart whose points fade toward blue or red depending on their X and Y.

A 200x150 LV_CHART_TYPE_SCATTER chart is configured with an X range of 0..200 and a Y range of 0..1000 and 50 points. Line width on LV_PART_ITEMS is zeroed so only the point markers show. With LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS set, the LV_EVENT_DRAW_TASK_ADDED callback fades older points by reducing opacity and recolors each LV_PART_INDICATOR fill between red and blue using the point's X and Y arrays. A 100 ms lv_timer pushes a new random point via lv_chart_set_next_value2.

Scrollable chart

A chart wider than its container scrolls horizontally as the user drags it.

LVGL doesn't expose a chart-specific zoom: to let a chart grow beyond the visible width, wrap it in a parent that is the viewport, then size the chart's width to a percentage larger than 100%. The parent's default scrollable behaviour kicks in. A horizontal lv_scale sits inside the same wrapper so its labels scroll in lockstep with the bars.

Chart data series

Two series on the same chart, each bound to its own Y axis.

Two <lv_chart-series> children sit on one chart but reference different axes via axis="primary_y" and axis="secondary_y". Each axis gets its own <lv_chart-axis> range, so a 0..100 temperature series and a 0..2000 pressure series share the plot without one squashing the other. The series colour matches the conceptual reading, not the axis.

Chart ticks and labels

Pair a chart with an lv_scale to get a labelled X axis.

A chart has no built-in tick or label rendering for its X axis — the convention is to stack a horizontal lv_scale directly below, sized to the chart's width and with total_tick_count matching the chart's point_count. text_src is a space-separated list of single-quoted labels (one per major tick), the same syntax button matrix maps use. For the Y axis you can place a vertical scale on either side of the chart with the same technique.

Chart types

Same data rendered as bar and scatter to highlight the type difference.

The type attribute controls how a chart draws its series. bar paints one column per slot; scatter plots (X, Y) pairs as dots. A scatter series binds to both a Y axis and an X axis — that's what the OR-flavoured axis="primary_y|primary_x" token encodes. Compare against chart_basic (a line chart) to complete the family.