Area

An area plot fills between a value line and a pane edge. The series overview covers data updates and removal.

Data

ChartType::Area accepts a scalar via Bar::from_value or OHLC bars. The main series reads ChartConfig::price_source, close by default; added areas read close. Whitespace breaks the line and fill.

ChartType::HlcArea needs high, low and close in a valid OHLC bar. It fills the high-to-close and close-to-low bands rather than filling to the pane edge.

Style and running result

This scene fills below the sample close line, fading to transparency at the bottom. It uses the shared synthetic OHLC history.

An area with a transparent lower fillOpen full size

Pan and zoom to see the fill follow the visible values and pane edge.

The interactive example needs JavaScript and WebAssembly. You can still use the chart setup alongside it.

series_area.rs

use egui_charts::Chart;

pub fn area() -> Chart {
    use eframe::egui::Color32;
    use egui_charts::ChartType;
    let mut chart = crate::first_chart::first_chart();
    chart.set_chart_type(ChartType::Area);
    let mut params = chart.chart_type_params().clone();
    params.styles.area.top_fill = Color32::from_rgba_unmultiplied(41, 98, 255, 115);
    params.styles.area.bottom_fill = Color32::TRANSPARENT;
    chart.set_chart_type_params(params);
    chart
}

The compiled setup is in series.rs. AreaStyle sets the edge line, top and bottom fill colours, gradient coordinates and fill direction. relative_gradient defaults to true, spreading the gradient from the visible line extreme to the pane edge; false uses the whole pane. invert_filled_area fills upward. Apply it through ChartTypeStyles::area.

For HLC area, HlcAreaStyle controls fill opacity and close-line width; the main chart’s bullish and bearish colours supply the bands. Added areas use SeriesOptions::color and width with the default downward gradient. Added HLC areas use up_color and down_color with default HLC style. Both types can be added series.

For fills on both sides of a reference, use baseline.