diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index 2b344e8..72815b2 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -40,6 +40,7 @@ Fixed
 - ``k-select`` does not longer updates twices when clicking in any options.
 - Fixed issue were clicking on MapBox with no topology threw an error.
 - Fixed key presses to select an option from ``k-input-auto`` component.
+- Fixed the ``k-chart-timeseries``/Interface Statistics Graph.
 
 [2025.1.0] - 2025-04-14
 ***********************
diff --git a/__test__/App.test.js b/__test__/App.test.js
index 6ad8c89..c26d88c 100644
--- a/__test__/App.test.js
+++ b/__test__/App.test.js
@@ -1,24 +1,28 @@
 import { mount, shallowMount } from '@vue/test-utils';
 import App from '@/App.vue';
 import Menubar from '@/components/kytos/misc/Menubar.vue';
-import { describe, test, expect, beforeAll, beforeEach } from "vitest";
-import { setActivePinia, createPinia } from 'pinia'
+import { describe, test, expect, beforeAll, beforeEach } from 'vitest';
+import { setActivePinia, createPinia } from 'pinia';
+import axios from 'axios';
 
-describe("App", () => {
+describe('App', () => {
     beforeAll(() => {
         expect(App).toBeTruthy();
     });
     beforeEach(() => {
-      setActivePinia(createPinia())
-    })
-    test("Does a wrapper exists?", () => {
+        setActivePinia(createPinia());
+    });
+    test('Does a wrapper exists?', () => {
         const wrapper = mount(App, {
             global: {
-              components: {
-                'k-menubar': Menubar
-              }
+                components: {
+                    'k-menubar': Menubar
+                },
+                mocks: {
+                    $http: axios
+                }
             }
-    });
+        });
         expect(wrapper.exists()).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/src/App.vue b/src/App.vue
index c15b0b7..c789b79 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,6 +18,9 @@
 </template>
 
 <script>
+import { mapActions } from 'pinia';
+import { useInterfaceStore } from './stores/interfaceStore';
+import { thresholdSturges } from 'd3';
 
 export default {
   name: 'app',
@@ -55,9 +58,16 @@ export default {
             });
         });
       });
-
     },
+    ...mapActions(useInterfaceStore, ['startPolling', 'stopPolling'])
+  },
+  mounted () {
+    this.startPolling(this);
+  },
+  unmounted () {
+    this.stopPolling();
   }
+
 }
 </script>
 
diff --git a/src/components/kytos/chart/Timeseries.vue b/src/components/kytos/chart/Timeseries.vue
index 6ce0e91..e8262b6 100644
--- a/src/components/kytos/chart/Timeseries.vue
+++ b/src/components/kytos/chart/Timeseries.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import KytosBase from "../base/KytosBase"
+import KytosBase from "../base/KytosBase";
 import * as d3 from 'd3';
 
 export default {
@@ -54,30 +54,29 @@ export default {
       rxline: null,
       txarea: null,
       rxarea: null,
-      updatedHeight: null
+      updatedHeight: null,
+      baseChartWidth: 322
     }
   },
   computed: {
-    chartWidth () {
-      let container = document.getElementById(this.plotId).parentElement
-      return container.getBoundingClientRect().width
-    },
     height () {
       return this.updatedHeight - this.margin.top - this.margin.bottom
     },
-    width () {
-      return this.chartWidth - this.margin.left - this.margin.right
-    },
     dpid () {
       return this.interface_id.split(":").slice(0,-1).join(":")
     },
     legend_height () {
       return (this.display_legend) ? 40 : 0
     },
-    plotId () { return "timeseries-" + this.id },
+    plotId () { 
+      return "timeseries-" + this.uuid4();
+    },
     maxSpeed () { return Number(this.jsonData.speed) || 0 }
   },
   methods: {
+    width () {
+      return this.baseChartWidth - this.margin.left - this.margin.right
+    },
     buildLine (yParam) {
       let x = this.x
       let y = this.y
@@ -94,38 +93,70 @@ export default {
           .y1(function(d) { return y(d[yParam]) })
     },
     parseJsonData () {
-      let data = []
-      Object.entries(this.jsonData.timestamps).forEach(([idx, timestamp]) => {
-        data.push({"timestamp": new Date(timestamp * 1000),
-                   "tx_bytes": this.jsonData.tx_bytes[idx],
-                   "rx_bytes": this.jsonData.rx_bytes[idx]})
-      })
-      this.data = data
+      let data = [];
+      let transformed_data = [];
+      this.jsonData.forEach((element) => {
+        data.push({"timestamp": element.timestamp,
+                   "tx_bytes": element.tx_bytes,
+                   "rx_bytes": element.rx_bytes});
+      });
+      transformed_data = this.calculateBPS(data);
+      this.data = transformed_data;
+    },
+    calculateBPS (data) {
+      let transformed_data = [];
+      if (data.length < 2) {
+        return [{
+          "timestamp": 0,
+          "tx_bytes": 0,
+          "rx_bytes": 0
+        }]
+      }
+      for (let i = 1; i < (data.length); i++) {
+        let initial = data[i - 1];
+        let final = data[i];
+        let delta_tx = final.tx_bytes - initial.tx_bytes;
+        let delta_rx = final.rx_bytes - initial.rx_bytes;
+        let delta_time = final.timestamp.getTime() - initial.timestamp.getTime();
+        let bpsT = (delta_tx * 1000 * 8 / (delta_time)) || 0;
+        let bpsR = (delta_rx * 1000 * 8 / (delta_time)) || 0;
+        let midpoint_time = new Date((final.timestamp.getTime() + initial.timestamp.getTime()) / 2);
+        transformed_data.push({
+          "timestamp": midpoint_time,
+          "tx_bytes": bpsT,
+          "rx_bytes": bpsR
+        })
+      }
+      return transformed_data;
     },
     updateMargins () {
       this.updatedHeight = this.chartHeight
-      this.margin.left = this.chartWidth * 0.02
-      this.margin.right = this.chartWidth * 0.02
+      this.margin.left = this.baseChartWidth * 0.02
+      this.margin.right = this.baseChartWidth * 0.05
       this.margin.top = this.updatedHeight * 0.08
       this.margin.bottom = this.updatedHeight * 0.05
       if (this.showAxis) {
-        this.margin.left = this.chartWidth * 0.08
-        this.margin.bottom = this.updatedHeight * 0.12
+        this.margin.left = this.baseChartWidth * 0.19
+        this.margin.bottom = this.updatedHeight * 0.2
       }
     },
     init () {
       // Init x axis
-      this.x = d3.scaleTime().range([0, this.width])
+      this.x = d3.scaleTime().range([0, this.width()])
       // Init y axis
-      this.y = d3.scaleLinear().range([this.height, 0])
+      this.y = d3.scaleLinear().range([this.height, 0]).nice();
 
       // Init x axis
       this.xaxis = d3.axisBottom(this.x)
+        .ticks(4)
+        .tickFormat(d3.timeFormat("%H:%M"))
+        
 
       // Init y axis
       let humanize_bytes = this.$filters.humanize_bytes
       this.yaxis = d3.axisLeft(this.y)
-        .tickFormat(function(v) { return humanize_bytes(v * 8) })
+        .ticks(5)
+        .tickFormat(function(v) { return humanize_bytes(v) })
 
       // Init x grid
       this.xgrid = d3.axisBottom(this.x)
@@ -135,7 +166,7 @@ export default {
 
       // Init y grid
       this.ygrid = d3.axisLeft(this.y)
-        .tickSize(-this.width)
+        .tickSize(-this.width())
         .tickFormat("")
 
       // init lines and areas
@@ -146,10 +177,9 @@ export default {
 
       this.chart = d3.select("#" + this.plotId)
         .append("svg")
-          .attr("width", this.width + this.margin.left + this.margin.right)
-          .attr("height", this.height + this.margin.top + this.margin.bottom + this.legend_height)
           .attr("preserveAspectRatio", "xMinYMin meet")
-          .attr("viewBox", "0 0 " + (this.width + this.margin.left + this.margin.right) + " " + (this.height + this.margin.top + this.margin.bottom))
+          .attr("viewBox", "0 0 " + (this.width() + this.margin.right + this.margin.left) + " " + (this.height + this.margin.top + this.margin.bottom))
+          .classed("svg-content", true)
           .append("g")
           .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")")
 
@@ -305,9 +335,12 @@ export default {
     this.updateChart()
   },
   watch: {
-    jsonData () {
-      this.parseJsonData()
-      this.updateChart()
+    jsonData: {
+      handler: function () {
+        this.parseJsonData()
+        this.updateChart()
+      },
+      deep: true
     },
     chartHeight () {
       this.updateMargins()
@@ -324,6 +357,11 @@ export default {
   width: 100%
   float: left
   background-color: dark-theme-variables.$fill-bar
+  display: inline-block
+  position: relative
+  padding-bottom: 31.0559%
+  overflow: hidden
+  vertical-align: top
 
   text
     fill: grey
@@ -351,7 +389,7 @@ export default {
 
   .line
     stroke-width: 2
-    fill: none
+    fill: transparent
 
   .rx
     &.line
@@ -367,4 +405,14 @@ export default {
 
   .hidden
     display: none
+
+  .tick text 
+    font-size: 10px
+
+  .svg-content
+    display: inline-block
+    position: absolute
+    top: 0
+    left: 0
+
 </style>
diff --git a/src/components/kytos/switch/Interface.vue b/src/components/kytos/switch/Interface.vue
index 5d7a562..e364e1f 100644
--- a/src/components/kytos/switch/Interface.vue
+++ b/src/components/kytos/switch/Interface.vue
@@ -1,26 +1,32 @@
 <template>
   <div :id="id" class="k-interface" @click="open_interface">
+    <div class="left_div">
       <div class="usage" :class="utilization_color_class"></div>
       <div class="details" :title="mac">
-        <div class="name">{{name}} ({{port_number}})</div>
+        <div class="name">{{ name }} ({{ port_number }})</div>
+        <div v-if="isStale" class="name">Stale</div>
         <div class="x_bytes">
           <div class="padding-top-bottom"></div>
-          <div class="tx_bytes">{{ $filters.humanize_bytes(tx_bytes * 8) }} T&nbsp;</div>
+          <div class="tx_bytes">{{ $filters.humanize_bytes(tx_bytes) }} T&nbsp;</div>
           <div class="padding-middle"></div>
-          <div class="rx_bytes">{{ $filters.humanize_bytes(rx_bytes * 8) }} R&nbsp;</div>
+          <div class="rx_bytes">{{ $filters.humanize_bytes(rx_bytes) }} R&nbsp;</div>
           <div class="padding-top-bottom"></div>
         </div>
       </div>
-
-<k-chart-timeseries v-if="chartJsonData" :interface_id="interface_id" :jsonData="chartJsonData" :showGrid="false" :showAxis="false" :plotArea="false" :chartHeight="45"></k-chart-timeseries>
+    </div>
+    <div class="chart">
+      <k-chart-timeseries v-if="chartJsonData" :interface_id="interface_id" :jsonData="chartJsonData" :showGrid="true"
+        :showAxis="true" :plotArea="true" :chartHeight="100"></k-chart-timeseries>
       <div class="warn" v-else>&nbsp;Interface speed is unavailable</div>
-
+    </div>
   </div>
 </template>
 
 <script>
 import KytosBase from '../base/KytosBase'
 import InterfaceInfo from '../../../kytos/interfaceInfo.vue'
+import { mapState } from 'pinia';
+import { useInterfaceStore } from '../../../stores/interfaceStore';
 
 /**
  * Representation of the interfaces used.
@@ -50,6 +56,10 @@ export default {
       type: String,
       required: true,
     },
+    interface_switch: {
+      type: String,
+      required: true,
+    },
     content_switch: {
       type: Object,
       required: true,
@@ -79,72 +89,60 @@ export default {
       required: false,
     },
   },
-  data () {
+  data() {
     return {
-      chartJsonData: null,
+      chartJsonData: [],
       interval: null,
       tx_bytes: null,
       rx_bytes: null,
     }
   },
   computed: {
-    dpid () {
-      return this.interface_id.split(":").slice(0,-1).join(":")
-    },
-    endpoint () {
-      // TODO: of_stats/kronos must implement the endpoint
-      //let url = this.$kytos_server_api + "kytos/of_stats/v1/"
-      //return url + this.dpid + "/ports/" + Number(this.port_number)
-    },
     utilization_color_class: function () {
       if (this.speed === null) return ''
 
       // Calculate highest interface utilization (tx or rx)
       let max_Bps = Math.max(this.tx_bytes, this.rx_bytes)
       let utilization = max_Bps / this.speed
-
+      if (this.isStale) return 'stale'
       if (utilization > 0.8) return 'high'
       if (utilization > 0.5) return 'medium'
       return 'low'
-    }
+    },
+    ...mapState(useInterfaceStore, ['interfaceChartData', 'isStale'])
   },
   methods: {
     open_interface() {
-      var content = {"component": InterfaceInfo,
-                     "content": this,
-                     "icon": "cog",
-                     "title": "Interface Details",
-                     "subtitle": this.name}
+      var content = {
+        "component": InterfaceInfo,
+        "content": this,
+        "icon": "cog",
+        "title": "Interface Details",
+        "subtitle": this.name
+      }
       this.$kytos.eventBus.$emit("showInfoPanel", content)
 
     },
-    parseInterfaceData (data) {
-      if (!data) {
-        var msg = "Error while trying to fetch interface data."
-        this.$kytos.eventBus.$emit('statusMessage', msg, true)
-      } else {
-        this.chartJsonData = data['data']
-      }
-    },
-    update_chart() {
-      // TODO: of_stats/kronos must implement the endpoint
-      //json(this.endpoint, this.parseInterfaceData)
-    }
-  },
-  mounted () {
-    this.update_chart()
-    this.interval = setInterval(this.update_chart, 60000)
   },
-  beforeUnmount () {
-    clearInterval(this.interval)
+  mounted() {
+    this.chartJsonData = this.interfaceChartData?.[this.interface_switch]?.[this.port_number];
   },
 
   watch: {
-    chartJsonData () {
-      let data = this.chartJsonData
-      let last_index = data.tx_bytes.length - 1
-      this.tx_bytes = data.tx_bytes[last_index]
-      this.rx_bytes = data.rx_bytes[last_index]
+    chartJsonData: {
+      handler: function (newVal) {
+        let data = this.chartJsonData;
+        if (data.length > 1) {
+          let last_index = data.length - 1;
+          let delta_tx = data[last_index].tx_bytes - data[last_index - 1].tx_bytes;
+          let delta_rx = data[last_index].rx_bytes - data[last_index - 1].rx_bytes;
+          let delta_time_tx = data[last_index].timestamp.getTime() - data[last_index-1].timestamp.getTime();
+          let delta_time_rx = data[last_index].timestamp.getTime() - data[last_index-1].timestamp.getTime();
+          this.tx_bytes = (Math.round(((delta_tx * 1000 * 8/(delta_time_tx)) + Number.EPSILON) * 100) / 100) || 0;
+          this.rx_bytes = (Math.round(((delta_rx * 1000 * 8/(delta_time_rx)) + Number.EPSILON) * 100) / 100) || 0;
+        }
+      },
+      deep: true
     }
   }
 }
@@ -156,6 +154,7 @@ export default {
 
 .k-interface
   display: flex
+  flex-direction: row
   cursor: pointer
   padding-top: 0.3em
   width: 100%
@@ -166,27 +165,37 @@ export default {
    color: dark-theme-variables.$fill-link-h
    background: dark-theme-variables.$fill-bar
 
-  .usage
-    min-width: 4px
-
-    &.high
-      background-color: dark-theme-variables.$kytos-red
-    &.medium
-      background-color: dark-theme-variables.$kytos-yellow
-    &.low
-      background-color: dark-theme-variables.$kytos-green
+  .left_div
+    flex-grow: 1
+    display: flex
+    flex-direction: row
+    cursor: pointer
+
+    .usage
+      flex-shrink: 0
+      min-width: 4px
+
+      &.high
+        background-color: dark-theme-variables.$kytos-red
+      &.medium
+        background-color: dark-theme-variables.$kytos-yellow
+      &.low
+        background-color: dark-theme-variables.$kytos-green
+      &.stale
+        background-color: #C76E00
 
   .details
-    min-width: 90px
+    flex-grow: 1
     background-color: dark-theme-variables.$fill-input-bg
     display: flex
+    gap: 0px
     flex-direction: column
 
     .name
       font-size: 0.7em
       display: block
       overflow: hidden
-      height: 10px
+      height: 20px
       padding: 5px 5px 5px
       flex: 0 0 auto
       word-break: break-all
@@ -225,4 +234,9 @@ export default {
     align-self: center
     justify-content: center
 
+  .chart
+    min-width: 322px
+    flex-grow: 10
+
+
 </style>
diff --git a/src/helpers/http-helpers.js b/src/helpers/http-helpers.js
index cc94638..4d5bd0f 100644
--- a/src/helpers/http-helpers.js
+++ b/src/helpers/http-helpers.js
@@ -17,15 +17,15 @@ const post_error = (
 ) => {
   let notification = {
     icon: "gear",
-    title: `${title} (${error.response.status || 0}):`,
+    title: `${title} (${error.response?.status || 0}):`,
     description: `${description.prefix}${
-      error.response.data.description
+      error.response?.data.description
         ? error.response.data.description
-        : error.response.data
+        : error.response?.data
     }${description.suffix}`,
   };
 
-  _this.$kytos.eventBus.$emit("setNotification", notification);
+  _this?.$kytos?.eventBus.$emit("setNotification", notification);
 };
 
 const http_helpers = { post_error };
diff --git a/src/stores/interfaceStore.js b/src/stores/interfaceStore.js
new file mode 100644
index 0000000..3a24c6a
--- /dev/null
+++ b/src/stores/interfaceStore.js
@@ -0,0 +1,92 @@
+import { defineStore } from 'pinia';
+import http_helpers from '../helpers/http-helpers';
+
+export const useInterfaceStore = defineStore('interfaceData', {
+    state: () => ({
+        _this: null,
+        kytos_server_api: location.protocol + '//' + location.host + '/api/',
+        interfaceChartData: {},
+        pollingInterval: null,
+        isStale: false
+    }),
+    actions: {
+        async updateData() {
+            await this.fetchPortStats();
+        },
+        async fetchPortStats() {
+            try {
+                let url = this.kytos_server_api + 'amlight/kytos_stats/v1/port/stats';
+                const response = await this._this.$http.get(url);
+                let response_data = structuredClone(response.data);
+                if (Object.keys(this.interfaceChartData).length === 0) {
+                    let data = structuredClone(response.data);
+                    Object.keys(data).forEach((switchID) => {
+                        Object.keys(data[switchID]).forEach((portNum) => {
+                            data[switchID][portNum] = [];
+                        });
+                    });
+                    this.interfaceChartData = data;
+                }
+                Object.keys(response_data).forEach((switchID) => {
+                    Object.keys(response_data[switchID]).forEach((portNum) => {
+                        this.interfaceChartData[switchID][portNum].push(
+                            response_data[switchID][portNum]
+                        );
+                        let size =
+                            this.interfaceChartData[switchID][portNum].length - 1;
+                        this.interfaceChartData[switchID][portNum][size].timestamp =
+                            new Date(
+                                this.interfaceChartData[switchID][portNum][
+                                    size
+                                ].updated_at
+                            );
+                        delete this.interfaceChartData[switchID][portNum][size]
+                            .updated_at;
+                        if (this.interfaceChartData[switchID][portNum].length > 7) {
+                            this.interfaceChartData[switchID][portNum].shift();
+                        }
+                    });
+                });
+                let switches = Object.keys(this.interfaceChartData);
+                let ports = Object.keys(this.interfaceChartData[switches[0]]);
+                let array_size = this.interfaceChartData[switches[0]][ports[0]].length;
+                let first_switch_stats = this.interfaceChartData[switches[0]][ports[0]];
+                if (
+                    first_switch_stats[array_size - 1].timestamp.getTime() ===
+                    first_switch_stats[array_size - 2].timestamp.getTime()
+                ) {
+                    this.isStale = true;
+                } else {
+                    this.isStale = false;
+                }
+            } catch (err) {
+                if (this._this.$http.isAxiosError(err)) {
+                    http_helpers.post_error(
+                        this._this,
+                        err,
+                        'Could not reach links data'
+                    );
+                } else {
+                    throw err;
+                }
+            }
+        },
+        startPolling(_this) {
+            this._this = _this;
+            if (this.pollingInterval) {
+                clearInterval(this.pollingInterval);
+            }
+
+            this.updateData();
+            this.pollingInterval = setInterval(() => {
+                this.updateData();
+            }, 50000);
+        },
+        stopPolling() {
+            if (this.pollingInterval) {
+                clearInterval(this.pollingInterval);
+                this.pollingInterval = null;
+            }
+        }
+    }
+});