diff --git a/examples/simple_producer/src/main.rs b/examples/simple_producer/src/main.rs
index 963c469..294c001 100644
--- a/examples/simple_producer/src/main.rs
+++ b/examples/simple_producer/src/main.rs
@@ -66,7 +66,6 @@ impl Telemetry {
                     tokio::time::sleep(Duration::from_secs(1)).await;
                 }
             }
-            ()
         });
 
         Ok(Self {
@@ -140,13 +139,13 @@ async fn main() -> Result<(), Box<dyn Error>> {
         tokio::time::sleep_until(next_time).await;
         sin_tlm_handle.publish(
             Value::Float32(
-                (f32::TAU() * (index as f32) / (1000.0_f32)).sin() + (index as f32) / (1000.0_f32)
+                (f32::TAU() * (index as f32) / (1000.0_f32)).sin()
             ),
             chrono::Utc::now(),
         ).await?;
         cos_tlm_handle.publish(
             Value::Float64(
-                (f64::TAU() * (index as f64) / (1000.0_f64)).cos() + (index as f64) / (1000.0_f64)
+                (f64::TAU() * (index as f64) / (1000.0_f64)).cos()
             ),
             chrono::Utc::now(),
         ).await?;
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 14949a0..a78fb6f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -4,4 +4,4 @@ import { RouterView } from 'vue-router'
 
 <template>
   <RouterView />
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
index 9162fa4..fd419f3 100644
--- a/frontend/src/assets/main.scss
+++ b/frontend/src/assets/main.scss
@@ -1,4 +1,3 @@
-
 $light-gray: #d0d1d0;
 $dark-gray: #303031;
 
diff --git a/frontend/src/components/Axis.vue b/frontend/src/components/Axis.vue
deleted file mode 100644
index db10217..0000000
--- a/frontend/src/components/Axis.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<script setup lang="ts">
-import { computed, inject, provide, ref, toValue, watch } from 'vue'
-import { AXIS_DATA, type AxisData } from '@/graph/axis'
-import { useNow } from '@/composables/ticker'
-import { GRAPH_DATA, type GraphData } from '@/graph/graph'
-
-const props = defineProps<{
-    y_limits?: [number, number]
-    disable_x_axis_line?: boolean
-}>();
-
-const minor_tick_length = computed(() => 4);
-const major_tick_length = computed(() => 8);
-const text_offset = computed(() => 5);
-
-const ticker = useNow(33);
-
-const min_y = ref(Infinity);
-const max_y = ref(-Infinity);
-const raw_min_y = ref(Infinity);
-const raw_max_y = ref(-Infinity);
-
-const axis_update_watch = ref(0);
-
-watch([ticker], () => {
-    axis_update_watch.value++;
-    min_y.value = raw_min_y.value;
-    max_y.value = raw_max_y.value;
-    raw_min_y.value = Infinity;
-    raw_max_y.value = -Infinity;
-});
-
-function update_min_y(y: number) {
-    if (y < min_y.value) {
-        min_y.value = y;
-    }
-    if (y < raw_min_y.value) {
-        raw_min_y.value = y;
-    }
-}
-function update_max_y(y: number) {
-    if (y > max_y.value) {
-        max_y.value = y;
-    }
-    if (y > raw_max_y.value) {
-        raw_max_y.value = y;
-    }
-}
-
-const half_diff_y_value = computed(() => (max_y.value - min_y.value) / 2.0);
-const average_y_value = computed(() => min_y.value + half_diff_y_value.value);
-
-const min_y_value = computed(() => {
-    if (props.y_limits) {
-        return props.y_limits[0];
-    }
-    if (max_y.value > min_y.value) {
-        return average_y_value.value - half_diff_y_value.value * 1.05;
-    } else {
-        return -1.0;
-    }
-});
-const max_y_value = computed(() => {
-    if (props.y_limits) {
-        return props.y_limits[1];
-    }
-    if (max_y.value > min_y.value) {
-        return average_y_value.value + half_diff_y_value.value * 1.05;
-    } else {
-        return 1.0;
-    }
-});
-
-const graph_data = inject<GraphData>(GRAPH_DATA)!;
-
-const y_map = (y: number) => {
-    const height = toValue(graph_data.height);
-    const border = toValue(graph_data.border);
-    const diff_y = toValue(max_y_value) - toValue(min_y_value);
-    return height * (1 - (y - toValue(min_y_value)) / diff_y) + border;
-};
-
-provide<AxisData>(AXIS_DATA, {
-    min_y: min_y_value,
-    max_y: max_y_value,
-    axis_update_watch: axis_update_watch,
-    min_y_callback: update_min_y,
-    max_y_callback: update_max_y,
-    y_map: y_map
-});
-
-const lines = computed(() => {
-    const diff_y_val = max_y_value.value - min_y_value.value;
-    const grid_spread = Math.pow(10, Math.floor(Math.log10(diff_y_val)));
-    const major_spread = grid_spread / 2;
-    const minor_spread = major_spread / 2;
-    const minor_ticks = [];
-    const major_ticks = [];
-    const grid_lines = [];
-    for (let i = Math.floor(min_y_value.value / grid_spread); i <= Math.ceil(max_y_value.value / grid_spread); i++) {
-        const y = i * grid_spread;
-        grid_lines.push(y);
-    }
-    for (let i = Math.floor(min_y_value.value / major_spread); i <= Math.ceil(max_y_value.value / major_spread); i++) {
-        const y = i * major_spread;
-        if (grid_lines.indexOf(y) < 0) {
-            major_ticks.push(y);
-        }
-    }
-    for (let i = Math.floor(min_y_value.value / minor_spread); i <= Math.ceil(max_y_value.value / minor_spread); i++) {
-        const y = i * minor_spread;
-        if (grid_lines.indexOf(y) < 0 && major_ticks.indexOf(y) < 0) {
-            minor_ticks.push(y);
-        }
-    }
-    return [minor_ticks, major_ticks, grid_lines];
-});
-
-</script>
-
-<template>
-    <g class="minor_tick">
-        <template v-for="tick of lines[0]" :key="tick">
-            <polyline :points="`${graph_data.x_map(toValue(graph_data.max_x)) - minor_tick_length},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.max_x))},${y_map(tick)}`"></polyline>
-            <text class="right_edge middle_text" :x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset" :y="y_map(tick)">{{ tick.toFixed(2) }}</text>
-        </template>
-    </g>
-    <g class="major_tick">
-        <template v-for="tick of lines[1]" :key="tick">
-            <polyline :points="`${graph_data.x_map(toValue(graph_data.max_x)) - major_tick_length},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.max_x))},${y_map(tick)}`"></polyline>
-            <text class="right_edge middle_text" :x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset" :y="y_map(tick)">{{ tick.toFixed(1) }}</text>
-        </template>
-    </g>
-    <g class="grid_tick">
-        <template v-for="tick of lines[2]" :key="tick">
-            <polyline :points="`${graph_data.x_map(toValue(graph_data.min_x))},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.max_x))},${y_map(tick)}`"></polyline>
-            <text class="right_edge middle_text" :x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset" :y="y_map(tick)">{{ tick.toFixed(0) }}</text>
-        </template>
-    </g>
-    <g clip-path="url(#content)">
-        <slot></slot>
-    </g>
-</template>
-
-<style scoped lang="scss">
-
-.x_axis {
-    fill: #FFFFFF;
-    stroke: #FFFFFF;
-    color: #FFFFFF;
-}
-
-.right_edge {
-    text-anchor: start;
-}
-
-.middle_text {
-    alignment-baseline: middle;
-    font-family: Helvetica, sans-serif;
-}
-
-.minor_tick {
-    stroke: #666666;
-    stroke-width: 1px;
-    fill: #666666;
-    color: #666666;
-}
-
-.major_tick {
-    stroke: #AAAAAA;
-    stroke-width: 1px;
-    fill: #AAAAAA;
-    color: #AAAAAA;
-}
-
-.grid_tick {
-    stroke: #FFFFFF;
-    stroke-width: 1px;
-    fill: #FFFFFF;
-    color: #FFFFFF;
-}
-
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/Graph.vue b/frontend/src/components/Graph.vue
deleted file mode 100644
index 373d07f..0000000
--- a/frontend/src/components/Graph.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script setup lang="ts">
-import { computed, provide, toValue } from 'vue'
-import { useNow } from '@/composables/ticker'
-import { GRAPH_DATA, type GraphData } from '@/graph/graph'
-
-const props = defineProps<{
-    width: number
-    height: number
-    border?: number
-    // min_x?: number
-    // max_x?: number
-}>();
-
-const svg_viewbox = computed(() => {
-    return `0 0 ${props.width} ${props.height}`;
-})
-const now = useNow(33);
-const window_duration = 30 * 1000; // 30 seconds
-
-const time_lines = [
-    1, // 1ms
-    10, // 10ms
-    100, // 100ms
-    1000, // 1s
-    5000, // 5s
-    10000, // 10s
-    30000, // 30s
-    60000, // 1m
-    300000, // 5m
-    6000000, // 10m
-    18000000, // 30m
-    36000000, // 1h
-    144000000, // 4h
-    216000000, // 6h
-    432000000, // 12h
-    864000000, // 1d
-    6048000000, // 1w
-];
-time_lines.reverse();
-const text_offset = computed(() => 5);
-
-const border = computed(() => props.border || 0);
-
-const max_x = now;
-const min_x = computed(() => max_x.value - window_duration);
-
-const x_map = (x: number) => {
-    const diff_x = max_x.value - min_x.value;
-    return (props.width - border.value) * (x - min_x.value) / diff_x;
-};
-
-provide<GraphData>(GRAPH_DATA, {
-    border: border,
-    min_x: min_x,
-    max_x: now,
-    width: () => props.width - 2 * border.value,
-    height: () => props.height - 2 * border.value,
-    x_map: x_map
-});
-
-const lines = computed(() => {
-    const diff_x = max_x.value - min_x.value;
-    let duration = time_lines.find((duration) => diff_x / duration >= 3)!;
-    const result = [];
-    for (let i = Math.floor(max_x.value / duration); i >= Math.ceil(min_x.value / duration) - 5; i--) {
-        const x = i * duration;
-        result.push(x);
-    }
-    return result;
-});
-
-</script>
-
-<template>
-    <svg :viewBox="svg_viewbox" :width="props.width" :height="props.height">
-        <defs>
-            <clipPath id="content">
-                <rect :x="0" :y="border" :width="width - border" :height="height - border * 2"></rect>
-            </clipPath>
-        </defs>
-        <g class="time_tick">
-            <template v-for="tick of lines" :key="tick">
-                <polyline :points="`${x_map(tick)},${border} ${x_map(tick)},${height - border}`"></polyline>
-                <text class="bottom_edge" :transform="`translate(${x_map(tick)},${height - border + text_offset}) rotate(0)`">{{ new Date(tick).toLocaleString() }}</text>
-            </template>
-        </g>
-        <slot></slot>
-    </svg>
-</template>
-
-<style scoped lang="scss">
-
-.bottom_edge {
-    text-anchor: middle;
-    alignment-baseline: text-before-edge;
-    font-family: Helvetica, sans-serif;
-}
-
-.time_tick {
-    stroke: #FFFFFF;
-    stroke-width: 1px;
-    fill: #FFFFFF;
-    color: #FFFFFF;
-    font-size: 16px;
-}
-
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/GraphAxis.vue b/frontend/src/components/GraphAxis.vue
new file mode 100644
index 0000000..58946b0
--- /dev/null
+++ b/frontend/src/components/GraphAxis.vue
@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import { computed, inject, provide, ref, toValue, watch } from 'vue'
+import { AXIS_DATA, type AxisData, AxisSide, AxisType } from '@/graph/axis'
+import { useNow } from '@/composables/ticker'
+import { GRAPH_DATA, type GraphData } from '@/graph/graph'
+
+const props = defineProps<{
+  y_limits?: [number, number]
+  side?: AxisSide
+  type?: AxisType
+}>()
+
+const minor_tick_length = computed(() => 4)
+const major_tick_length = computed(() => 8)
+const text_offset = computed(() => 5)
+const side = computed(() => props.side || AxisSide.Right)
+const type = computed(() => props.type || AxisType.Linear)
+
+const ticker_locations = [Math.log10(1), Math.log10(2), Math.log10(5)]
+ticker_locations.reverse()
+
+const ticker = useNow(33)
+
+const min_y = ref(Infinity)
+const max_y = ref(-Infinity)
+const raw_min_y = ref(Infinity)
+const raw_max_y = ref(-Infinity)
+
+const axis_update_watch = ref(0)
+
+watch([ticker], () => {
+  axis_update_watch.value++
+  min_y.value = raw_min_y.value
+  max_y.value = raw_max_y.value
+  raw_min_y.value = Infinity
+  raw_max_y.value = -Infinity
+})
+
+function update_min_y(y: number) {
+  if (y < min_y.value) {
+    min_y.value = y
+  }
+  if (y < raw_min_y.value) {
+    raw_min_y.value = y
+  }
+}
+function update_max_y(y: number) {
+  if (y > max_y.value) {
+    max_y.value = y
+  }
+  if (y > raw_max_y.value) {
+    raw_max_y.value = y
+  }
+}
+
+// const half_diff_y_value = computed(() => (max_y.value - min_y.value) / 2.0);
+// const average_y_value = computed(() => min_y.value + half_diff_y_value.value);
+
+const min_y_value = computed(() => {
+  if (props.y_limits) {
+    return props.y_limits[0]
+  }
+  if (type.value == AxisType.Linear) {
+    if (max_y.value > min_y.value) {
+      const half_diff_y_value = (max_y.value - min_y.value) / 2.0
+      const average_y_value = min_y.value + half_diff_y_value
+      return average_y_value - half_diff_y_value * 1.05
+    } else {
+      return -1.0
+    }
+  } else {
+    if (max_y.value > min_y.value) {
+      const half_diff_y_value =
+        (Math.log(max_y.value) - Math.log(min_y.value)) / 2.0
+      const average_y_value = Math.log(min_y.value) + half_diff_y_value
+      return Math.exp(average_y_value - half_diff_y_value * 1.05)
+    } else {
+      return 0.0
+    }
+  }
+})
+const max_y_value = computed(() => {
+  if (props.y_limits) {
+    return props.y_limits[1]
+  }
+  if (type.value == AxisType.Linear) {
+    if (max_y.value > min_y.value) {
+      const half_diff_y_value = (max_y.value - min_y.value) / 2.0
+      const average_y_value = min_y.value + half_diff_y_value
+      return average_y_value + half_diff_y_value * 1.05
+    } else {
+      return 1.0
+    }
+  } else {
+    if (max_y.value > min_y.value) {
+      const half_diff_y_value =
+        (Math.log(max_y.value) - Math.log(min_y.value)) / 2.0
+      const average_y_value = Math.log(min_y.value) + half_diff_y_value
+      return Math.exp(average_y_value + half_diff_y_value * 1.05)
+    } else {
+      return 1.0
+    }
+  }
+})
+
+const graph_data = inject<GraphData>(GRAPH_DATA)!
+
+const y_map = (y: number) => {
+  const height = toValue(graph_data.height)
+  const border_top_bottom = toValue(graph_data.border_top_bottom)
+  let max_value = toValue(max_y_value)
+  let min_value = toValue(min_y_value)
+  let y_value = y
+  if (type.value == AxisType.Logarithmic) {
+    max_value = Math.log(max_value)
+    min_value = Math.log(min_value)
+    y_value = Math.log(y_value)
+  }
+  const diff_y = max_value - min_value
+  return height * (1 - (y_value - min_value) / diff_y) + border_top_bottom
+}
+
+provide<AxisData>(AXIS_DATA, {
+  axis_update_watch: axis_update_watch,
+  min_y_callback: update_min_y,
+  max_y_callback: update_max_y,
+  y_map: y_map,
+})
+
+const lines = computed(() => {
+  const diff_y_val = (max_y_value.value - min_y_value.value) / 2
+  const diff_log10 = Math.log10(diff_y_val)
+  const diff_log10_fraction = diff_log10 - Math.floor(diff_log10)
+  const ticker_location = ticker_locations.find(
+    location => location < diff_log10_fraction,
+  )!
+  const grid_spread = Math.pow(10, Math.floor(diff_log10) + ticker_location)
+  const major_spread = grid_spread / 2
+  const minor_spread = major_spread / 2
+  const minor_ticks = []
+  const major_ticks = []
+  const grid_lines = []
+  for (
+    let i = Math.floor(min_y_value.value / grid_spread);
+    i <= Math.ceil(max_y_value.value / grid_spread);
+    i++
+  ) {
+    const y = i * grid_spread
+    grid_lines.push(y)
+  }
+  for (
+    let i = Math.floor(min_y_value.value / major_spread);
+    i <= Math.ceil(max_y_value.value / major_spread);
+    i++
+  ) {
+    const y = i * major_spread
+    if (grid_lines.indexOf(y) < 0) {
+      major_ticks.push(y)
+    }
+  }
+  for (
+    let i = Math.floor(min_y_value.value / minor_spread);
+    i <= Math.ceil(max_y_value.value / minor_spread);
+    i++
+  ) {
+    const y = i * minor_spread
+    if (grid_lines.indexOf(y) < 0 && major_ticks.indexOf(y) < 0) {
+      minor_ticks.push(y)
+    }
+  }
+  return [minor_ticks, major_ticks, grid_lines]
+})
+</script>
+
+<template>
+  <template v-if="side == AxisSide.Right">
+    <g class="minor_tick" clip-path="url(#y_ticker)">
+      <template v-for="tick of lines[0]" :key="tick">
+        <polyline
+          :points="`${graph_data.x_map(toValue(graph_data.max_x)) - minor_tick_length},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.max_x))},${y_map(tick)}`"
+        ></polyline>
+        <text
+          class="right_edge middle_text"
+          :x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
+          :y="y_map(tick)"
+          >{{ tick.toFixed(2) }}</text
+        >
+      </template>
+    </g>
+    <g class="major_tick" clip-path="url(#y_ticker)">
+      <template v-for="tick of lines[1]" :key="tick">
+        <polyline
+          :points="`${graph_data.x_map(toValue(graph_data.max_x)) - major_tick_length},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.max_x))},${y_map(tick)}`"
+        ></polyline>
+        <text
+          class="right_edge middle_text"
+          :x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
+          :y="y_map(tick)"
+          >{{ tick.toFixed(1) }}</text
+        >
+      </template>
+    </g>
+    <g class="grid_tick" clip-path="url(#y_ticker)">
+      <template v-for="tick of lines[2]" :key="tick">
+        <polyline
+          :points="`${graph_data.x_map(toValue(graph_data.min_x))},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.max_x))},${y_map(tick)}`"
+        ></polyline>
+        <text
+          class="right_edge middle_text"
+          :x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
+          :y="y_map(tick)"
+          >{{ tick.toFixed(0) }}</text
+        >
+      </template>
+    </g>
+  </template>
+  <template v-if="side == AxisSide.Left">
+    <g class="minor_tick" clip-path="url(#y_ticker)">
+      <template v-for="tick of lines[0]" :key="tick">
+        <polyline
+          :points="`${graph_data.x_map(toValue(graph_data.min_x)) + minor_tick_length},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.min_x))},${y_map(tick)}`"
+        ></polyline>
+        <text
+          class="left_edge middle_text"
+          :x="graph_data.x_map(toValue(graph_data.min_x)) - text_offset"
+          :y="y_map(tick)"
+          >{{ tick.toFixed(2) }}</text
+        >
+      </template>
+    </g>
+    <g class="major_tick" clip-path="url(#y_ticker)">
+      <template v-for="tick of lines[1]" :key="tick">
+        <polyline
+          :points="`${graph_data.x_map(toValue(graph_data.max_x)) - major_tick_length},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.max_x))},${y_map(tick)}`"
+        ></polyline>
+        <text
+          class="left_edge middle_text"
+          :x="graph_data.x_map(toValue(graph_data.min_x)) - text_offset"
+          :y="y_map(tick)"
+          >{{ tick.toFixed(1) }}</text
+        >
+      </template>
+    </g>
+    <g class="grid_tick" clip-path="url(#y_ticker)">
+      <template v-for="tick of lines[2]" :key="tick">
+        <polyline
+          :points="`${graph_data.x_map(toValue(graph_data.min_x))},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.max_x))},${y_map(tick)}`"
+        ></polyline>
+        <text
+          class="left_edge middle_text"
+          :x="graph_data.x_map(toValue(graph_data.min_x)) - text_offset"
+          :y="y_map(tick)"
+          >{{ tick.toFixed(0) }}</text
+        >
+      </template>
+    </g>
+  </template>
+  <g clip-path="url(#content)">
+    <slot></slot>
+  </g>
+</template>
+
+<style scoped lang="scss">
+.x_axis {
+  fill: #ffffff;
+  stroke: #ffffff;
+  color: #ffffff;
+}
+
+.right_edge {
+  text-anchor: start;
+}
+
+.left_edge {
+  text-anchor: end;
+}
+
+.middle_text {
+  alignment-baseline: middle;
+  font-family: Helvetica, sans-serif;
+}
+
+.minor_tick {
+  stroke: #666666;
+  stroke-width: 1px;
+  fill: #666666;
+  color: #666666;
+}
+
+.major_tick {
+  stroke: #aaaaaa;
+  stroke-width: 1px;
+  fill: #aaaaaa;
+  color: #aaaaaa;
+}
+
+.grid_tick {
+  stroke: #ffffff;
+  stroke-width: 1px;
+  fill: #ffffff;
+  color: #ffffff;
+}
+</style>
diff --git a/frontend/src/components/Line.vue b/frontend/src/components/Line.vue
deleted file mode 100644
index 6714659..0000000
--- a/frontend/src/components/Line.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<script setup lang="ts">
-import { useTelemetry } from '@/composables/telemetry'
-import { computed, inject, ref, shallowRef, type ShallowRef, toValue, watch } from 'vue'
-import { type TelemetryDataItem, WEBSOCKET_SYMBOL, type WebsocketHandle } from '@/composables/websocket'
-import { GRAPH_DATA, type GraphData } from '@/graph/graph'
-import { AXIS_DATA, type AxisData } from '@/graph/axis'
-
-const props = defineProps<{
-    data: string
-    color: string
-}>();
-
-const smoothing_distance = 0.15 * 1000;
-
-const { data, error } = useTelemetry(() => props.data);
-const websocket = inject<ShallowRef<WebsocketHandle>>(WEBSOCKET_SYMBOL)!;
-let value = websocket.value.listen_to_telemetry(data);
-
-const graph_data = inject<GraphData>(GRAPH_DATA)!;
-const axis_data = inject<AxisData>(AXIS_DATA)!;
-
-const min = ref(Infinity);
-const max = ref(-Infinity);
-
-let memo = shallowRef<TelemetryDataItem[]>([]);
-watch([value], ([val]) => {
-    const min_x = toValue(graph_data.min_x);
-    if (val) {
-        const new_memo = [val].concat(memo.value);
-        while (new_memo.length > 2 && Date.parse(new_memo[new_memo.length - 2].timestamp) < min_x) {
-            new_memo.pop();
-        }
-        memo.value = new_memo;
-        let min_val = Infinity;
-        let max_val = -Infinity;
-        for (let item of new_memo) {
-            const item_val = item.value[data.value!.data_type] as number;
-            min_val = Math.min(min_val, item_val);
-            max_val = Math.max(max_val, item_val);
-        }
-        max.value = max_val;
-        min.value = min_val;
-    }
-});
-
-watch([min, axis_data.axis_update_watch], ([min_val, _]) => {
-    axis_data.min_y_callback(min_val);
-}, {
-    immediate: true
-});
-
-watch([max, axis_data.axis_update_watch], ([max_val, _]) => {
-    axis_data.max_y_callback(max_val);
-}, {
-    immediate: true
-});
-
-let points = computed(() => {
-    let points = "";
-    if (memo.value.length == 0 || data.value == null) {
-        return "";
-    }
-
-    let last_x = graph_data.x_map(toValue(graph_data.max_x));
-    let last_t = toValue(graph_data.max_x) + smoothing_distance;
-
-    for (let data_item of memo.value) {
-        const t = Date.parse(data_item.timestamp);
-        const v = data_item.value[data.value.data_type];
-        const x = graph_data.x_map(t);
-        const y = axis_data.y_map(v);
-
-        if (last_t - t < smoothing_distance) {
-            points += ` ${x},${y}`;
-        } else {
-            points += ` ${last_x},${y} ${x},${y}`;
-        }
-        last_x = x;
-        last_t = t;
-        if (last_x <= 0.0) {
-            break;
-        }
-    }
-    return points;
-});
-
-</script>
-
-<template>
-    <polyline fill="none" :stroke="color" stroke-width="1" :points="points"></polyline>
-</template>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/SvgGraph.vue b/frontend/src/components/SvgGraph.vue
new file mode 100644
index 0000000..257625c
--- /dev/null
+++ b/frontend/src/components/SvgGraph.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { useNow } from '@/composables/ticker'
+import { GRAPH_DATA, type GraphData } from '@/graph/graph'
+
+const props = defineProps<{
+  width: number
+  height: number
+  border_left_right?: number
+  border_top_bottom?: number
+  // min_x?: number
+  // max_x?: number
+}>()
+
+const svg_viewbox = computed(() => {
+  return `0 0 ${props.width} ${props.height}`
+})
+const now = useNow(33)
+const window_duration = 30 * 1000 // 30 seconds
+
+const time_lines = [
+  1, // 1ms
+  10, // 10ms
+  100, // 100ms
+  1000, // 1s
+  5000, // 5s
+  10000, // 10s
+  30000, // 30s
+  60000, // 1m
+  300000, // 5m
+  6000000, // 10m
+  18000000, // 30m
+  36000000, // 1h
+  144000000, // 4h
+  216000000, // 6h
+  432000000, // 12h
+  864000000, // 1d
+  6048000000, // 1w
+]
+time_lines.reverse()
+const text_offset = computed(() => 5)
+
+const border_left_right = computed(() => props.border_left_right || 0)
+const border_top_bottom = computed(() => props.border_top_bottom || 0)
+
+const max_x = now
+const min_x = computed(() => max_x.value - window_duration)
+
+const x_map = (x: number) => {
+  const diff_x = max_x.value - min_x.value
+  return (
+    ((props.width - 2 * border_left_right.value) * (x - min_x.value)) / diff_x +
+    border_left_right.value
+  )
+}
+
+provide<GraphData>(GRAPH_DATA, {
+  border_top_bottom: border_top_bottom,
+  min_x: min_x,
+  max_x: now,
+  width: () => props.width - 2 * border_left_right.value,
+  height: () => props.height - 2 * border_top_bottom.value,
+  x_map: x_map,
+})
+
+const lines = computed(() => {
+  const diff_x = max_x.value - min_x.value
+  const duration = time_lines.find(duration => diff_x / duration >= 3)!
+  const result = []
+  for (
+    let i = Math.ceil(max_x.value / duration);
+    i >= Math.ceil(min_x.value / duration) - 5;
+    i--
+  ) {
+    const x = i * duration
+    result.push(x)
+  }
+  return result
+})
+</script>
+
+<template>
+  <svg :viewBox="svg_viewbox" :width="props.width" :height="props.height">
+    <defs>
+      <clipPath id="content">
+        <rect
+          :x="border_left_right"
+          :y="border_top_bottom"
+          :width="width - border_left_right * 2"
+          :height="height - border_top_bottom * 2"
+        ></rect>
+      </clipPath>
+      <clipPath id="y_ticker">
+        <rect
+          :x="0"
+          :y="border_top_bottom"
+          :width="width"
+          :height="height - border_top_bottom * 2"
+        ></rect>
+      </clipPath>
+      <clipPath id="x_ticker">
+        <rect
+          :x="border_left_right"
+          :y="0"
+          :width="width - border_left_right * 2"
+          :height="height"
+        ></rect>
+      </clipPath>
+    </defs>
+    <g class="time_tick" clip-path="url(#x_ticker)">
+      <template v-for="tick of lines" :key="tick">
+        <polyline
+          :points="`${x_map(tick)},${border_top_bottom} ${x_map(tick)},${height - border_top_bottom}`"
+        ></polyline>
+        <text
+          class="bottom_edge"
+          :transform="`translate(${x_map(tick)},${height - border_top_bottom + text_offset}) rotate(0)`"
+        >
+          {{ new Date(tick).toLocaleString() }}
+        </text>
+      </template>
+    </g>
+    <slot></slot>
+  </svg>
+</template>
+
+<style scoped lang="scss">
+.bottom_edge {
+  text-anchor: middle;
+  alignment-baseline: text-before-edge;
+  font-family: Helvetica, sans-serif;
+}
+
+.time_tick {
+  stroke: #ffffff;
+  stroke-width: 1px;
+  fill: #ffffff;
+  color: #ffffff;
+  font-size: 16px;
+}
+</style>
diff --git a/frontend/src/components/TelemetryLine.vue b/frontend/src/components/TelemetryLine.vue
new file mode 100644
index 0000000..6f22910
--- /dev/null
+++ b/frontend/src/components/TelemetryLine.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { useTelemetry } from '@/composables/telemetry'
+import {
+  computed,
+  inject,
+  ref,
+  shallowRef,
+  type ShallowRef,
+  toValue,
+  watch,
+} from 'vue'
+import {
+  type TelemetryDataItem,
+  WEBSOCKET_SYMBOL,
+  type WebsocketHandle,
+} from '@/composables/websocket'
+import { GRAPH_DATA, type GraphData } from '@/graph/graph'
+import { AXIS_DATA, type AxisData } from '@/graph/axis'
+
+const props = defineProps<{
+  data: string
+  color: string
+}>()
+
+const smoothing_distance = 0.15 * 1000
+
+const { data } = useTelemetry(() => props.data)
+const websocket = inject<ShallowRef<WebsocketHandle>>(WEBSOCKET_SYMBOL)!
+const value = websocket.value.listen_to_telemetry(data)
+
+const graph_data = inject<GraphData>(GRAPH_DATA)!
+const axis_data = inject<AxisData>(AXIS_DATA)!
+
+const min = ref(Infinity)
+const max = ref(-Infinity)
+
+const memo = shallowRef<TelemetryDataItem[]>([])
+watch([value], ([val]) => {
+  const min_x = toValue(graph_data.min_x)
+  if (val) {
+    const new_memo = [val].concat(memo.value)
+    while (
+      new_memo.length > 2 &&
+      Date.parse(new_memo[new_memo.length - 2].timestamp) < min_x
+    ) {
+      new_memo.pop()
+    }
+    memo.value = new_memo
+    let min_val = Infinity
+    let max_val = -Infinity
+    for (const item of new_memo) {
+      const item_val = item.value[data.value!.data_type] as number
+      min_val = Math.min(min_val, item_val)
+      max_val = Math.max(max_val, item_val)
+    }
+    max.value = max_val
+    min.value = min_val
+  }
+})
+
+watch(
+  [min, axis_data.axis_update_watch],
+  ([min_val]) => {
+    axis_data.min_y_callback(min_val)
+  },
+  {
+    immediate: true,
+  },
+)
+
+watch(
+  [max, axis_data.axis_update_watch],
+  ([max_val]) => {
+    axis_data.max_y_callback(max_val)
+  },
+  {
+    immediate: true,
+  },
+)
+
+const points = computed(() => {
+  let points = ''
+  if (memo.value.length == 0 || data.value == null) {
+    return ''
+  }
+
+  let last_x = graph_data.x_map(toValue(graph_data.max_x))
+  let last_t = toValue(graph_data.max_x) + smoothing_distance
+
+  for (const data_item of memo.value) {
+    const t = Date.parse(data_item.timestamp)
+    const v = data_item.value[data.value.data_type]
+    const x = graph_data.x_map(t)
+    const y = axis_data.y_map(v)
+
+    if (last_t - t < smoothing_distance) {
+      points += ` ${x},${y}`
+    } else {
+      points += ` ${last_x},${y} ${x},${y}`
+    }
+    last_x = x
+    last_t = t
+    if (last_x <= 0.0) {
+      break
+    }
+  }
+  return points
+})
+</script>
+
+<template>
+  <polyline
+    fill="none"
+    :stroke="color"
+    stroke-width="1"
+    :points="points"
+  ></polyline>
+</template>
+
+<style></style>
diff --git a/frontend/src/composables/telemetry.ts b/frontend/src/composables/telemetry.ts
index c4eb6f8..54f117f 100644
--- a/frontend/src/composables/telemetry.ts
+++ b/frontend/src/composables/telemetry.ts
@@ -1,28 +1,29 @@
 import { ref, toValue, watchEffect } from 'vue'
-import { type MaybeRefOrGetter } from '@vue/reactivity'
+import { type MaybeRefOrGetter } from 'vue'
 
 export interface TelemetryDefinition {
-    uuid: string;
-    name: string;
-    data_type: string;
+  uuid: string
+  name: string
+  data_type: string
 }
 
 export function useTelemetry(name: MaybeRefOrGetter<string>) {
-    const data = ref<TelemetryDefinition | null>(null);
-    const error = ref<any | null>(null);
+  const data = ref<TelemetryDefinition | null>(null)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const error = ref<any | null>(null)
 
-    watchEffect(async () => {
-        const name_value = toValue(name);
+  watchEffect(async () => {
+    const name_value = toValue(name)
 
-        try {
-            const res = await fetch(`/api/tlm/${name_value}`);
-            data.value = await res.json();
-            error.value = null;
-        } catch (e) {
-            data.value = null;
-            error.value = e;
-        }
-    });
+    try {
+      const res = await fetch(`/api/tlm/${name_value}`)
+      data.value = await res.json()
+      error.value = null
+    } catch (e) {
+      data.value = null
+      error.value = e
+    }
+  })
 
-    return { data, error };
+  return { data, error }
 }
diff --git a/frontend/src/composables/ticker.ts b/frontend/src/composables/ticker.ts
index baf832b..81b27cc 100644
--- a/frontend/src/composables/ticker.ts
+++ b/frontend/src/composables/ticker.ts
@@ -1,19 +1,19 @@
 import { onMounted, onUnmounted, ref, shallowRef } from 'vue'
 
 export function useNow(update_ms: number) {
-    const handle = shallowRef<number | undefined>(undefined);
-    const now = ref(Date.now());
+  const handle = shallowRef<number | undefined>(undefined)
+  const now = ref(Date.now())
 
-    onMounted(() => {
-        handle.value = setInterval(() => {
-            now.value = Date.now();
-        }, update_ms);
-    });
-    onUnmounted(() => {
-        if (handle.value) {
-            clearInterval(handle.value);
-        }
-    });
+  onMounted(() => {
+    handle.value = setInterval(() => {
+      now.value = Date.now()
+    }, update_ms)
+  })
+  onUnmounted(() => {
+    if (handle.value) {
+      clearInterval(handle.value)
+    }
+  })
 
-    return now;
+  return now
 }
diff --git a/frontend/src/composables/websocket.ts b/frontend/src/composables/websocket.ts
index 6245d2e..722a9e9 100644
--- a/frontend/src/composables/websocket.ts
+++ b/frontend/src/composables/websocket.ts
@@ -1,121 +1,138 @@
-import { computed, onMounted, onUnmounted, ref, type Ref, shallowRef, watch } from 'vue'
+import {
+  computed,
+  type MaybeRefOrGetter,
+  onMounted,
+  onUnmounted,
+  ref,
+  type Ref,
+  shallowRef,
+  toValue,
+  watch,
+} from 'vue'
+import type { TelemetryDefinition } from '@/composables/telemetry'
 
 export interface TelemetryDataItem {
-    value: any;
-    timestamp: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any
+  timestamp: string
 }
 
 interface TlmValue {
-    uuid: string;
-    value: TelemetryDataItem;
+  uuid: string
+  value: TelemetryDataItem
 }
 
 export class WebsocketHandle {
-    websocket: WebSocket | null;
-    should_be_connected: boolean;
-    connected: Ref<boolean>;
-    on_telem_value: Map<string, Array<(value: TelemetryDataItem)=>void>>;
+  websocket: WebSocket | null
+  should_be_connected: boolean
+  connected: Ref<boolean>
+  on_telem_value: Map<string, Array<(value: TelemetryDataItem) => void>>
 
-    constructor() {
-        this.websocket = null;
-        this.should_be_connected = false;
-        this.connected = ref(false);
-        this.on_telem_value = new Map();
+  constructor() {
+    this.websocket = null
+    this.should_be_connected = false
+    this.connected = ref(false)
+    this.on_telem_value = new Map()
+  }
+
+  connect() {
+    this.should_be_connected = true
+    if (this.websocket != null) {
+      return
     }
 
-    connect() {
-        this.should_be_connected = true;
-        if (this.websocket != null) {
-            return;
+    this.websocket = new WebSocket(
+      location.protocol.replace('http', 'ws') + '//' + location.host + '/ws',
+    )
+    this.websocket.addEventListener('open', () => {
+      this.connected.value = true
+    })
+    this.websocket.addEventListener('close', () => {
+      if (this.should_be_connected) {
+        this.disconnect()
+        setTimeout(() => {
+          this.connect()
+        }, 1000)
+      }
+    })
+    this.websocket.addEventListener('error', () => {
+      if (this.should_be_connected) {
+        this.disconnect()
+        setTimeout(() => {
+          this.connect()
+        }, 1000)
+      }
+    })
+    this.websocket.addEventListener('message', event => {
+      const message = JSON.parse(event.data)
+      if (message['TlmValue']) {
+        const tlm_value = message['TlmValue'] as TlmValue
+        const listeners = this.on_telem_value.get(tlm_value.uuid)
+        if (listeners) {
+          listeners.forEach(listener => {
+            listener(tlm_value.value)
+          })
         }
+      }
+    })
+  }
 
-        this.websocket = new WebSocket(location.protocol.replace("http", "ws") + "//" + location.host + "/ws");
-        this.websocket.addEventListener("open", (event) => {
-            this.connected.value = true;
-        });
-        this.websocket.addEventListener("close", (event) => {
-            if (this.should_be_connected) {
-                this.disconnect();
-                setTimeout(() => {
-                    this.connect();
-                }, 1000);
-            }
-        });
-        this.websocket.addEventListener("error", (event) => {
-            if (this.should_be_connected) {
-                this.disconnect();
-                setTimeout(() => {
-                    this.connect();
-                }, 1000);
-            }
-        });
-        this.websocket.addEventListener("message", (event) => {
-            const message = JSON.parse(event.data);
-            if (message["TlmValue"]) {
-                const tlm_value = message["TlmValue"] as TlmValue;
-                const listeners = this.on_telem_value.get(tlm_value.uuid);
-                if (listeners) {
-                    listeners.forEach((listener) => {
-                        listener(tlm_value.value);
-                    });
-                }
-            }
-        });
+  disconnect() {
+    this.should_be_connected = false
+    if (this.websocket == null) {
+      return
     }
 
-    disconnect() {
-        this.should_be_connected = false;
-        if (this.websocket == null) {
-            return;
+    this.connected.value = false
+    this.websocket.close()
+    this.websocket = null
+    this.on_telem_value.clear()
+  }
+
+  listen_to_telemetry(telemetry: MaybeRefOrGetter<TelemetryDefinition | null>) {
+    const value_result = ref<TelemetryDataItem | null>(null)
+
+    const uuid = computed(() => {
+      const tlm = toValue(telemetry)
+      if (tlm) {
+        return tlm.uuid
+      }
+      return null
+    })
+
+    watch([uuid, this.connected], ([uuid_value, connected]) => {
+      if (connected && uuid_value) {
+        this.websocket?.send(
+          JSON.stringify({
+            RegisterTlmListener: {
+              uuid: uuid_value,
+            },
+          }),
+        )
+        if (!this.on_telem_value.has(uuid_value)) {
+          this.on_telem_value.set(uuid_value, [])
         }
+        this.on_telem_value.get(uuid_value)?.push(value => {
+          value_result.value = value
+        })
+      }
+    })
 
-        this.connected.value = false;
-        this.websocket.close();
-        this.websocket = null;
-        this.on_telem_value.clear();
-    }
-
-    listen_to_telemetry(telemetry: Ref<any>) {
-        const value_result = ref<TelemetryDataItem | null>(null);
-
-        const uuid = computed(() => {
-            if (telemetry.value) {
-                return telemetry.value.uuid;
-            }
-            return null;
-        });
-
-        watch([uuid, this.connected], ([uuid_value, connected]) => {
-            if (connected && uuid_value) {
-                this.websocket?.send(JSON.stringify({
-                    "RegisterTlmListener": {
-                        uuid: uuid_value
-                    }
-                }));
-                if (!this.on_telem_value.has(uuid_value)) {
-                    this.on_telem_value.set(uuid_value, []);
-                }
-                this.on_telem_value.get(uuid_value)?.push((value) => {
-                    value_result.value = value;
-                });
-            }
-        });
-
-        return value_result;
-    }
+    return value_result
+  }
 }
 
 export const WEBSOCKET_SYMBOL = Symbol()
 
 export function useWebsocket() {
-    const handle = shallowRef<WebsocketHandle>(new WebsocketHandle());
+  const handle = shallowRef<WebsocketHandle>(new WebsocketHandle())
 
-    onMounted(() => {
-        handle.value.connect();
-    });
-    onUnmounted(() => {
-        handle.value.disconnect();
-    })
+  onMounted(() => {
+    handle.value.connect()
+  })
+  onUnmounted(() => {
+    handle.value.disconnect()
+  })
 
-    return handle;
+  return handle
 }
diff --git a/frontend/src/graph/axis.ts b/frontend/src/graph/axis.ts
index 0633fcd..3b799a7 100644
--- a/frontend/src/graph/axis.ts
+++ b/frontend/src/graph/axis.ts
@@ -1,12 +1,20 @@
-import type { MaybeRefOrGetter } from '@vue/reactivity'
 import type { Ref } from 'vue'
 
+export enum AxisSide {
+  Right,
+  Left,
+  Hidden,
+}
+
+export enum AxisType {
+  Linear,
+  Logarithmic,
+}
+
 export const AXIS_DATA = Symbol()
 export interface AxisData {
-    min_y: MaybeRefOrGetter<number>;
-    max_y: MaybeRefOrGetter<number>;
-    axis_update_watch: Ref<number>;
-    max_y_callback: (y: number) => void;
-    min_y_callback: (y: number) => void;
-    y_map: (y: number) => number;
+  axis_update_watch: Ref<number>
+  max_y_callback: (y: number) => void
+  min_y_callback: (y: number) => void
+  y_map: (y: number) => number
 }
diff --git a/frontend/src/graph/graph.ts b/frontend/src/graph/graph.ts
index 9e74480..6e1e876 100644
--- a/frontend/src/graph/graph.ts
+++ b/frontend/src/graph/graph.ts
@@ -1,12 +1,12 @@
-import type { MaybeRefOrGetter } from '@vue/reactivity'
+import type { MaybeRefOrGetter } from 'vue'
 
 export const GRAPH_DATA = Symbol()
 
 export interface GraphData {
-    border: MaybeRefOrGetter<number>;
-    min_x: MaybeRefOrGetter<number>;
-    max_x: MaybeRefOrGetter<number>;
-    width: MaybeRefOrGetter<number>;
-    height: MaybeRefOrGetter<number>;
-    x_map: (x: number) => number;
+  border_top_bottom: MaybeRefOrGetter<number>
+  min_x: MaybeRefOrGetter<number>
+  max_x: MaybeRefOrGetter<number>
+  width: MaybeRefOrGetter<number>
+  height: MaybeRefOrGetter<number>
+  x_map: (x: number) => number
 }
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 7a112ca..197f6a7 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,25 +1,28 @@
 <script setup lang="ts">
 import { useWebsocket, WEBSOCKET_SYMBOL } from '@/composables/websocket'
 import { provide } from 'vue'
-import Graph from '@/components/Graph.vue'
-import Axis from '@/components/Axis.vue'
-import Line from '@/components/Line.vue'
-
-const websocket = useWebsocket();
-provide(WEBSOCKET_SYMBOL, websocket);
+import Graph from '@/components/SvgGraph.vue'
+import Axis from '@/components/GraphAxis.vue'
+import Line from '@/components/TelemetryLine.vue'
 
+const websocket = useWebsocket()
+provide(WEBSOCKET_SYMBOL, websocket)
 </script>
 
 <template>
-    <main>
-        <Graph :width=1500 :height=800 :border="48">
-            <Axis>
-                <Line data="simple_producer/sin" color="#FF0000"></Line>
-                <Line data="simple_producer/cos" color="#00FF00"></Line>
-            </Axis>
-        </Graph>
-    </main>
+  <main>
+    <Graph
+      :width="1500"
+      :height="800"
+      :border_top_bottom="24"
+      :border_left_right="64"
+    >
+      <Axis>
+        <Line data="simple_producer/sin" color="#FF0000"></Line>
+        <Line data="simple_producer/cos" color="#00FF00"></Line>
+      </Axis>
+    </Graph>
+  </main>
 </template>
 
-<style>
-</style>
+<style></style>
diff --git a/server/src/telemetry.rs b/server/src/telemetry.rs
index 795f68c..e7d7473 100644
--- a/server/src/telemetry.rs
+++ b/server/src/telemetry.rs
@@ -14,7 +14,7 @@ fn tlm_data_type_serialzier<S>(tlm_data_type: &TelemetryDataType, serializer: S)
 
 struct TlmDataTypeVisitor;
 
-impl<'de> Visitor<'de> for TlmDataTypeVisitor {
+impl Visitor<'_> for TlmDataTypeVisitor {
     type Value = TelemetryDataType;
 
     fn expecting(&self, formatter: &mut Formatter) -> std::fmt::Result {
@@ -95,7 +95,7 @@ impl TelemetryManagementService {
                 definition: TelemetryDefinition {
                     uuid: uuid.clone(),
                     name: telemetry_definition_request.name.clone(),
-                    data_type: telemetry_definition_request.data_type().clone(),
+                    data_type: telemetry_definition_request.data_type(),
                 },
                 data: tokio::sync::watch::channel(None).0
             });
@@ -104,11 +104,9 @@ impl TelemetryManagementService {
     }
 
     pub async fn get_by_name(&self, name: &String) -> Option<TelemetryData> {
-        let Some(uuid) = ({
+        let uuid = {
             let uuid_lock = self.uuid_mapping.lock().await;
-            uuid_lock.get(name).map(|inner| inner.clone())
-        }) else {
-            return None;
+            uuid_lock.get(name).cloned()?
         };
 
         self.get_by_uuid(&uuid).await
@@ -116,6 +114,6 @@ impl TelemetryManagementService {
 
     pub async fn get_by_uuid(&self, uuid: &String) -> Option<TelemetryData> {
         let tlm_lock = self.tlm_mapping.lock().await;
-        tlm_lock.get(uuid).map(|inner| inner.clone())
+        tlm_lock.get(uuid).cloned()
     }
 }