# Chart (/examples/widgets/chart) Basic line chart with two series [#basic-line-chart-with-two-series] Line chart plotting one primary and one secondary Y-axis series with point drop shadows. A 200x150 chart is centered on the active screen with `LV_CHART_TYPE_LINE`. Two series are added: a green series bound to `LV_CHART_AXIS_PRIMARY_Y` filled with `lv_chart_set_next_value`, and a red series bound to `LV_CHART_AXIS_SECONDARY_Y` filled by writing directly into the Y array. Drop shadow styles on `LV_PART_ITEMS` give each point a glow and `lv_chart_refresh` commits the direct writes. Scrollable bar chart with month scale [#scrollable-bar-chart-with-month-scale] Bar chart inside a scrollable wrapper paired with a horizontal month scale. A 200x150 container holds a transparent flex-column wrapper sized to 300% width so the chart scrolls horizontally. The wrapper contains a `LV_CHART_TYPE_BAR` chart with 12 points and two green series, plus a `lv_scale` in `LV_SCALE_MODE_HORIZONTAL_BOTTOM` labeled with month abbreviations. The scale's horizontal padding is aligned to the first bar using `lv_chart_get_first_point_center_offset`. 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. 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. Cursor follows clicked point [#cursor-follows-clicked-point] Line chart whose cursor snaps to the pressed data point. A 200x150 chart sits centered with one red series of 10 points and a blue cursor added via `lv_chart_add_cursor` with direction `LV_DIR_LEFT | LV_DIR_BOTTOM`. The `LV_EVENT_VALUE_CHANGED` callback reads `lv_chart_get_pressed_point` and moves the cursor with `lv_chart_set_cursor_point`. A prompt label reading "Click on a point" is aligned above the chart. 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`. 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.