# Chart (/examples/widgets/chart) Faded area under line 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 [#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 [#chart-cursor] A cross-hair cursor pinned to a specific (X, Y) location on the chart. `` 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 [#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 [#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-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 [#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 [#chart-data-series] Two series on the same chart, each bound to its own Y axis. Two `` children sit on one chart but reference different axes via `axis="primary_y"` and `axis="secondary_y"`. Each axis gets its own `` 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 [#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 [#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.