diff --git a/charming/src/component/data_zoom.rs b/charming/src/component/data_zoom.rs
index 6847633..d952eeb 100644
--- a/charming/src/component/data_zoom.rs
+++ b/charming/src/component/data_zoom.rs
@@ -71,10 +71,10 @@ pub struct DataZoom {
     end: Option<f64>,
 
     #[serde(skip_serializing_if = "Option::is_none")]
-    start_value: Option<f64>,
+    start_value: Option<CompositeValue>,
 
     #[serde(skip_serializing_if = "Option::is_none")]
-    end_value: Option<f64>,
+    end_value: Option<CompositeValue>,
 
     #[serde(skip_serializing_if = "Option::is_none")]
     min_span: Option<f64>,
@@ -240,12 +240,12 @@ impl DataZoom {
         self
     }
 
-    pub fn start_value<F: Into<f64>>(mut self, start_value: F) -> Self {
+    pub fn start_value<C: Into<CompositeValue>>(mut self, start_value: C) -> Self {
         self.start_value = Some(start_value.into());
         self
     }
 
-    pub fn end_value<F: Into<f64>>(mut self, end_value: F) -> Self {
+    pub fn end_value<C: Into<CompositeValue>>(mut self, end_value: C) -> Self {
         self.end_value = Some(end_value.into());
         self
     }
diff --git a/gallery/asset/sports-facilities-usage.csv b/gallery/asset/sports-facilities-usage.csv
new file mode 100644
index 0000000..4b721ac
--- /dev/null
+++ b/gallery/asset/sports-facilities-usage.csv
@@ -0,0 +1,16 @@
+DataSeries,2023,2022,2021,2020,2019,2018,2017,2016,2015,2014,2013,2012
+Swimming Pool Attendances,5567088,4531433,2534088,2245729,6523377,6505288,7062603,7081651,6898517,6870183,6724546,7034166
+Gymnasium Attendances,4020748,3053985,1969873,2098930,2900537,2430080,2477814,2451235,2554524,2562218,2523844,2298340
+Total Bookings,1630220,1517494,1239746,881178,1296245,1212216,1256010,1161428,1162779,1041967,933589,933687
+    Badminton Bookings,961758,897381,690325,479889,815257,774341,727432,669217,638485,579431,526660,538381
+    Tennis Bookings,205701,206559,234062,167999,183335,168573,156807,155931,168182,161888,133227,141621
+    Table-Tennis Bookings,250233,233425,174185,126605,146086,130232,120260,116237,105218,96274,84104,86706
+    Basketball Bookings,26346,16970,7366,5777,17883,16555,48016,33978,34661,41883,39362,27646
+    Squash Bookings,70092,66718,67737,57448,54470,52896,54591,54704,54973,41742,37610,34479
+    Football Bookings,34554,32022,15825,11861,26640,23651,27882,27133,28470,29074,27944,29487
+    Volleyball Bookings,15259,14733,8047,4746,13489,10086,22965,29540,29418,21188,13988,14182
+    Netball Bookings,8869,8700,6443,6427,6889,7235,7379,6380,9427,7339,7651,7549
+    Hockey Bookings,8118,6726,4730,2486,6144,6057,6499,5933,6601,5268,5345,4800
+    Rugby Bookings,740,482,74,277,553,574,636,638,521,399,533,608
+    Athletics Bookings,2134,2570,2222,1094,2420,2026,2398,2939,2358,642,277,324
+    Others,46416,31208,28730,16569,23079,19990,81145,58798,84465,56839,56888,47904
diff --git a/gallery/src/lib.rs b/gallery/src/lib.rs
index 025c798..146a70e 100644
--- a/gallery/src/lib.rs
+++ b/gallery/src/lib.rs
@@ -126,6 +126,7 @@ lazy_static! {
         insert!(m, line, split_legend);
         insert!(m, line, step_line);
         insert!(m, line, temperature_change);
+        insert!(m, line, time_axis);
         insert!(m, line, two_value_axes_in_polar);
         m
     };
diff --git a/gallery/src/line/mod.rs b/gallery/src/line/mod.rs
index 98b052b..95f5803 100644
--- a/gallery/src/line/mod.rs
+++ b/gallery/src/line/mod.rs
@@ -16,4 +16,5 @@ pub mod stacked_area;
 pub mod stacked_line;
 pub mod step_line;
 pub mod temperature_change;
+pub mod time_axis;
 pub mod two_value_axes_in_polar;
diff --git a/gallery/src/line/time_axis.rs b/gallery/src/line/time_axis.rs
new file mode 100644
index 0000000..a60c72a
--- /dev/null
+++ b/gallery/src/line/time_axis.rs
@@ -0,0 +1,63 @@
+use charming::{
+    component::{Axis, DataZoom, Grid, Title, Toolbox},
+    element::{AxisType, Tooltip, Trigger},
+    series::Line,
+    Chart,
+};
+
+pub fn chart() -> Chart {
+    let csv_data = include_str!("../../asset/sports-facilities-usage.csv");
+    let rows: Vec<&str> = csv_data.lines().collect();
+    let years: Vec<String> = rows[0]
+        .split(',')
+        .skip(1)
+        .map(|yr| yr.to_string())
+        .collect();
+
+    let mut series_data = Vec::new();
+    for row in rows.iter().skip(1) {
+        let mut split = row.split(',');
+        let key = split.next().unwrap().trim();
+        let values: Vec<f64> = split
+            .map(|val| val.trim().parse::<f64>().unwrap())
+            .collect();
+
+        let data: Vec<Vec<String>> = years
+            .iter()
+            .zip(values.iter())
+            .map(|(year, value)| vec![year.clone(), value.to_string()])
+            .collect();
+
+        series_data.push((key.to_string(), data));
+    }
+
+    let mut chart = Chart::new()
+        .title(
+            Title::new()
+                .text("Usage of Sports Facilities Managed by Sport Singapore (2012–2023)")
+                .left("center"),
+        )
+        .tooltip(Tooltip::new().trigger(Trigger::Axis))
+        .grid(
+            Grid::new()
+                .left("10%")
+                .right("10%")
+                .bottom("15%")
+                .contain_label(true),
+        )
+        .toolbox(Toolbox::new())
+        .x_axis(
+            Axis::new()
+                .type_(AxisType::Time)
+                .name("Year")
+                .boundary_gap(false),
+        )
+        .y_axis(Axis::new().type_(AxisType::Value).name("Attendance").min(0))
+        .data_zoom(DataZoom::new().start_value("2018").end_value("2023"));
+
+    for (key, data) in series_data {
+        chart = chart.series(Line::new().name(&key).data(data).smooth(true));
+    }
+
+    chart
+}