Your first chart

Create a chart once, give it bars ordered from oldest to newest, and show it on every frame. This complete native application uses the dependencies from installation.

Try the chart

This scene uses 120 fixed one-minute bars of synthetic data. The setup beside the chart comes from the same Rust file the example runs. Drag the plot to pan, scroll to zoom, and move the pointer to inspect a bar. Press Tab to leave the chart.

Your first candlestick chartOpen full size

Pan and zoom through the sample history. Your application supplies the real data.

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

first_chart.rs

use chrono::{DateTime, TimeDelta};
use egui_charts::{
    Chart,
    model::{Bar, BarData, Timeframe},
};

/// Create an interactive chart from a fixed, oldest-first history.
pub fn first_chart() -> Chart {
    let start = DateTime::UNIX_EPOCH + TimeDelta::days(20_000);
    let bars = (0..120)
        .map(|i| {
            let open = 100.0 + f64::from(i) * 0.1;
            let close = open + if i % 3 == 0 { -0.6 } else { 0.8 };
            Bar::new(
                start + TimeDelta::minutes(i.into()),
                open,
                open.max(close) + 0.4,
                open.min(close) - 0.4,
                close,
                800.0 + f64::from(i % 7) * 100.0,
            )
        })
        .collect();
    let mut chart = Chart::new(BarData::from_bars(bars));
    chart.set_symbol("SAMPLE");
    chart.set_timeframe(Timeframe::Min1);
    chart.set_visible_bars(60);
    chart
}

Run a native application

The minimal program below starts with two bars. Use the longer sample above in place of its chart setup to explore more history.

1. Create an application.

   Follow installation to create a Cargo project and add the chart widget, eframe and chrono.

2. Replace src/main.rs.

   src/main.rs

   use chrono::{TimeDelta, Utc};
   use eframe::egui;
   use egui_charts::{Chart, model::{Bar, BarData}};
   
   fn main() -> eframe::Result {
       let start = Utc::now() - TimeDelta::minutes(2);
       let bars = vec![
           Bar::new(start, 100.0, 103.0, 99.0, 102.0, 800.0),
           Bar::new(start + TimeDelta::minutes(1),
                    102.0, 104.0, 101.0, 103.0, 600.0),
       ];
       let mut chart = Chart::new(BarData::from_bars(bars));
       chart.set_symbol("SAMPLE");
   
       eframe::run_ui_native("My chart", Default::default(), move |ui, _| {
           egui::CentralPanel::default().show(ui, |ui| chart.show(ui));
       })
   }

3. Open your chart.

   cargo run

   Pan and zoom inside the plot. The crosshair follows your pointer.

Keep state between frames

Create the chart once

The closure owns the chart. Recreating it inside the frame callback discards its view and interaction state. Keep it alive and let Chart::show handle panning, zooming and the crosshair on each frame.

Replace history or update the last bar

Use SeriesId::MAIN to address the main series. set_data replaces its history; update replaces a bar with the same timestamp or appends a later one.

use chrono::DateTime;
use egui_charts::{Chart, model::{Bar, BarData}, widget::SeriesId};

let mut chart = Chart::new(BarData::new());
let time = DateTime::UNIX_EPOCH;
chart.set_data(SeriesId::MAIN, vec![
    Bar::new(time, 100.0, 102.0, 99.0, 101.0, 10.0),
]);
chart.update(SeriesId::MAIN,
    Bar::new(time, 100.0, 103.0, 99.0, 102.0, 15.0));
assert_eq!(chart.bars(SeriesId::MAIN).len(), 1);
assert_eq!(chart.bars(SeriesId::MAIN)[0].close, 102.0);

For a live application, keep retrieval off the UI thread and use the historical and streaming data contract. The builder guide covers events, persistence and synchronization.