diff --git a/crates/story/src/chart_story.rs b/crates/story/src/chart_story.rs
index db998db1..709ff5a7 100644
--- a/crates/story/src/chart_story.rs
+++ b/crates/story/src/chart_story.rs
@@ -246,6 +246,15 @@ impl Render for ChartStory {
                         false,
                         cx,
                     ))
+                    .child(chart_container(
+                        "Line Chart - Step After",
+                        LineChart::new(self.monthly_devices.clone())
+                            .x(|d| d.month.clone())
+                            .y(|d| d.desktop)
+                            .step_after(),
+                        false,
+                        cx,
+                    ))
                     .child(chart_container(
                         "Line Chart - Dots",
                         LineChart::new(self.monthly_devices.clone())
@@ -278,6 +287,15 @@ impl Render for ChartStory {
                         false,
                         cx,
                     ))
+                    .child(chart_container(
+                        "Area Chart - Step After",
+                        AreaChart::new(self.monthly_devices.clone())
+                            .x(|d| d.month.clone())
+                            .y(|d| d.desktop)
+                            .step_after(),
+                        false,
+                        cx,
+                    ))
                     .child(chart_container(
                         "Area Chart - Linear Gradient",
                         AreaChart::new(self.monthly_devices.clone())
diff --git a/crates/ui/src/chart/area_chart.rs b/crates/ui/src/chart/area_chart.rs
index e2ae6f64..9717e568 100644
--- a/crates/ui/src/chart/area_chart.rs
+++ b/crates/ui/src/chart/area_chart.rs
@@ -74,6 +74,11 @@ where
         self
     }
 
+    pub fn step_after(mut self) -> Self {
+        self.stroke_style = StrokeStyle::StepAfter;
+        self
+    }
+
     pub fn tick_margin(mut self, tick_margin: usize) -> Self {
         self.tick_margin = tick_margin;
         self
diff --git a/crates/ui/src/chart/line_chart.rs b/crates/ui/src/chart/line_chart.rs
index ca271b97..8660a6ee 100644
--- a/crates/ui/src/chart/line_chart.rs
+++ b/crates/ui/src/chart/line_chart.rs
@@ -64,6 +64,11 @@ where
         self
     }
 
+    pub fn step_after(mut self) -> Self {
+        self.stroke_style = StrokeStyle::StepAfter;
+        self
+    }
+
     pub fn dot(mut self) -> Self {
         self.dot = true;
         self
diff --git a/crates/ui/src/plot/mod.rs b/crates/ui/src/plot/mod.rs
index 76702880..94b74fc9 100644
--- a/crates/ui/src/plot/mod.rs
+++ b/crates/ui/src/plot/mod.rs
@@ -26,6 +26,7 @@ pub enum StrokeStyle {
     #[default]
     Natural,
     Linear,
+    StepAfter,
 }
 
 pub fn origin_point<T>(x: T, y: T, origin: Point<T>) -> Point<T>
diff --git a/crates/ui/src/plot/shape/area.rs b/crates/ui/src/plot/shape/area.rs
index a86b31a1..e46c1ae9 100644
--- a/crates/ui/src/plot/shape/area.rs
+++ b/crates/ui/src/plot/shape/area.rs
@@ -144,6 +144,16 @@ impl<T> Area<T> {
                     line_builder.line_to(*p);
                 }
             }
+            StrokeStyle::StepAfter => {
+                area_builder.move_to(points[0]);
+                line_builder.move_to(points[0]);
+                for p in points.windows(2) {
+                    area_builder.line_to(Point::new(p[1].x, p[0].y));
+                    area_builder.line_to(Point::new(p[1].x, p[1].y));
+                    line_builder.line_to(Point::new(p[1].x, p[0].y));
+                    line_builder.line_to(Point::new(p[1].x, p[1].y));
+                }
+            }
         }
 
         // Close path
diff --git a/crates/ui/src/plot/shape/line.rs b/crates/ui/src/plot/shape/line.rs
index e92c1e7d..6cfc24d6 100644
--- a/crates/ui/src/plot/shape/line.rs
+++ b/crates/ui/src/plot/shape/line.rs
@@ -182,6 +182,13 @@ impl<T> Line<T> {
                     builder.line_to(*p);
                 }
             }
+            StrokeStyle::StepAfter => {
+                builder.move_to(dots[0]);
+                for d in dots.windows(2) {
+                    builder.line_to(Point::new(d[1].x, d[0].y));
+                    builder.line_to(Point::new(d[1].x, d[1].y));
+                }
+            }
         }
 
         (builder.build().ok(), paint_dots)