diff --git a/src/components/AccountsChartPanel.vue b/src/components/AccountsChartPanel.vue
index a5a82e366..c9af5186f 100644
--- a/src/components/AccountsChartPanel.vue
+++ b/src/components/AccountsChartPanel.vue
@@ -8,16 +8,16 @@
     </template>
     <template #end>
       <chart-controls
-        v-model="selectedRange"
+        v-model="range"
         class="u-hidden-mobile"/>
     </template>
 
     <line-chart
       :data="accountsStatistics"
-      :interval="selectedRange.interval"/>
+      :interval="range.interval"/>
 
     <chart-controls
-      v-model="selectedRange"
+      v-model="range"
       class="accounts-chart-panel__controls u-hidden-desktop"/>
   </app-panel>
 </template>
@@ -26,12 +26,20 @@
 import { storeToRefs } from 'pinia'
 import { chartsHints } from '@/utils/hints/chartsHints'
 import { useChartsStore } from '@/stores/charts'
+import { CHART_INTERVALS_PRESETS_OPTIONS } from '~/utils/constants'
 
 const chartsStore = useChartsStore()
 const { accountsStatistics } = storeToRefs(chartsStore)
 const { fetchAccountsStatistics } = chartsStore
 
-const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
+const props = defineProps({
+  preselectedRange: {
+    type: Object,
+    default: CHART_INTERVALS_PRESETS_OPTIONS[4],
+  },
+})
+
+const range = ref(props.preselectedRange)
 
 await useAsyncData(async() => {
   await loadHashrateStatistics()
@@ -39,16 +47,16 @@ await useAsyncData(async() => {
 })
 
 if (process.client) {
-  watch([selectedRange], async() => {
+  watch([range], async() => {
     await loadHashrateStatistics()
   })
 }
 
 async function loadHashrateStatistics() {
   await fetchAccountsStatistics(
-    selectedRange.value.interval,
-    selectedRange.value.limit,
-    selectedRange.value.customInterval)
+    range.value.interval,
+    range.value.limit,
+    range.value.customInterval)
 }
 </script>
 
diff --git a/src/components/ContractsChartPanel.vue b/src/components/ContractsChartPanel.vue
index c2dac87bf..f134faa1e 100644
--- a/src/components/ContractsChartPanel.vue
+++ b/src/components/ContractsChartPanel.vue
@@ -5,16 +5,16 @@
     </template>
     <template #end>
       <chart-controls
-        v-model="selectedRange"
+        v-model="range"
         class="u-hidden-mobile"/>
     </template>
 
     <line-chart
       :data="contractsStatistics"
-      :interval="selectedRange.interval"/>
+      :interval="range.interval"/>
 
     <chart-controls
-      v-model="selectedRange"
+      v-model="range"
       class="contracts-chart-panel__controls u-hidden-desktop"/>
   </app-panel>
 </template>
@@ -23,12 +23,20 @@
 import { storeToRefs } from 'pinia'
 import { useChartsStore } from '@/stores/charts'
 import LineChart from '@/components/LineChart'
+import { CHART_INTERVALS_PRESETS_OPTIONS } from '~/utils/constants'
 
 const chartsStore = useChartsStore()
 const { contractsStatistics } = storeToRefs(chartsStore)
 const { fetchContractsStatistics } = chartsStore
 
-const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
+const props = defineProps({
+  preselectedRange: {
+    type: Object,
+    default: CHART_INTERVALS_PRESETS_OPTIONS[4],
+  },
+})
+
+const range = ref(props.preselectedRange)
 
 await useAsyncData(async() => {
   await loadContractsStatistics()
@@ -36,16 +44,16 @@ await useAsyncData(async() => {
 })
 
 if (process.client) {
-  watch(selectedRange, async() => {
+  watch(range, async() => {
     await loadContractsStatistics()
   })
 }
 
 async function loadContractsStatistics() {
   await fetchContractsStatistics(
-    selectedRange.value.interval,
-    selectedRange.value.limit,
-    selectedRange.value.customInterval)
+    range.value.interval,
+    range.value.limit,
+    range.value.customInterval)
 }
 
 </script>
diff --git a/src/components/DifficultyChartPanel.vue b/src/components/DifficultyChartPanel.vue
index d94b3fdb4..b54c22ff3 100644
--- a/src/components/DifficultyChartPanel.vue
+++ b/src/components/DifficultyChartPanel.vue
@@ -5,16 +5,16 @@
     </template>
     <template #end>
       <chart-controls
-        v-model="selectedRange"
+        v-model="range"
         class="u-hidden-mobile"/>
     </template>
 
     <line-chart
       :data="difficultyStatistics"
-      :interval="selectedRange.interval"/>
+      :interval="range.interval"/>
 
     <chart-controls
-      v-model="selectedRange"
+      v-model="range"
       class="difficulty-chart-panel__controls u-hidden-desktop"/>
   </app-panel>
 </template>
@@ -28,14 +28,7 @@ const chartsStore = useChartsStore()
 const { difficultyStatistics } = storeToRefs(chartsStore)
 const { fetchDifficultyStatistics } = chartsStore
 
-const props = defineProps({
-  range: {
-    required: true,
-    type: Object,
-  },
-})
-
-const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
+const range = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
 
 await useAsyncData(async() => {
   await loadDifficultytatistics()
@@ -43,16 +36,16 @@ await useAsyncData(async() => {
 })
 
 if (process.client) {
-  watch([selectedRange], async() => {
+  watch([range], async() => {
     await loadDifficultytatistics()
   })
 }
 
 async function loadDifficultytatistics() {
   await fetchDifficultyStatistics(
-    selectedRange.value.interval,
-    selectedRange.value.limit,
-    selectedRange.value.customInterval)
+    range.value.interval,
+    range.value.limit,
+    range.value.customInterval)
 }
 </script>
 
diff --git a/src/components/HashrateChartPanel.vue b/src/components/HashrateChartPanel.vue
index a006828c2..91f236b20 100644
--- a/src/components/HashrateChartPanel.vue
+++ b/src/components/HashrateChartPanel.vue
@@ -5,16 +5,16 @@
     </template>
     <template #end>
       <chart-controls
-        v-model="selectedRange"
+        v-model="range"
         class="u-hidden-mobile"/>
     </template>
 
     <line-chart
       :data="hashrateStatistics"
-      :interval="selectedRange.interval"/>
+      :interval="range.interval"/>
 
     <chart-controls
-      v-model="selectedRange"
+      v-model="range"
       class="hashrate-chart-panel__controls u-hidden-desktop"/>
   </app-panel>
 </template>
@@ -27,7 +27,7 @@ const chartsStore = useChartsStore()
 const { hashrateStatistics } = storeToRefs(chartsStore)
 const { fetchHashrateStatistics } = chartsStore
 
-const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
+const range = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
 
 await useAsyncData(async() => {
   await loadHashratetatistics()
@@ -35,16 +35,16 @@ await useAsyncData(async() => {
 })
 
 if (process.client) {
-  watch([selectedRange], async() => {
+  watch([range], async() => {
     await loadHashratetatistics()
   })
 }
 
 async function loadHashratetatistics() {
   await fetchHashrateStatistics(
-    selectedRange.value.interval,
-    selectedRange.value.limit,
-    selectedRange.value.customInterval)
+    range.value.interval,
+    range.value.limit,
+    range.value.customInterval)
 }
 </script>
 
diff --git a/src/components/KeyblocksChartPanel.vue b/src/components/KeyblocksChartPanel.vue
index 0f758184b..527552df6 100644
--- a/src/components/KeyblocksChartPanel.vue
+++ b/src/components/KeyblocksChartPanel.vue
@@ -5,16 +5,16 @@
     </template>
     <template #end>
       <chart-controls
-        v-model="selectedRange"
+        v-model="range"
         class="u-hidden-mobile"/>
     </template>
 
     <line-chart
       :data="keyblocksStatistics"
-      :interval="selectedRange.interval"/>
+      :interval="range.interval"/>
 
     <chart-controls
-      v-model="selectedRange"
+      v-model="range"
       class="keyblocks-chart-panel__controls u-hidden-desktop"/>
   </app-panel>
 </template>
@@ -28,7 +28,7 @@ const chartsStore = useChartsStore()
 const { keyblocksStatistics } = storeToRefs(chartsStore)
 const { fetchKeyblocksStatistics } = chartsStore
 
-const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
+const range = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
 
 await useAsyncData(async() => {
   await loadKeyblockStatistics()
@@ -36,16 +36,16 @@ await useAsyncData(async() => {
 })
 
 if (process.client) {
-  watch(selectedRange, async() => {
+  watch(range, async() => {
     await loadKeyblockStatistics()
   })
 }
 
 async function loadKeyblockStatistics() {
   await fetchKeyblocksStatistics(
-    selectedRange.value.interval,
-    selectedRange.value.limit,
-    selectedRange.value.customInterval)
+    range.value.interval,
+    range.value.limit,
+    range.value.customInterval)
 }
 </script>
 
diff --git a/src/components/NamesChartPanel.vue b/src/components/NamesChartPanel.vue
index e4f79e376..191397519 100644
--- a/src/components/NamesChartPanel.vue
+++ b/src/components/NamesChartPanel.vue
@@ -5,16 +5,16 @@
     </template>
     <template #end>
       <chart-controls
-        v-model="selectedRange"
+        v-model="range"
         class="u-hidden-mobile"/>
     </template>
 
     <line-chart
       :data="namesStatistics"
-      :interval="selectedRange.interval"/>
+      :interval="range.interval"/>
 
     <chart-controls
-      v-model="selectedRange"
+      v-model="range"
       class="names-chart-panel__chart__controls u-hidden-desktop"/>
   </app-panel>
 </template>
@@ -28,7 +28,18 @@ const chartsStore = useChartsStore()
 const { namesStatistics } = storeToRefs(chartsStore)
 const { fetchNamesStatistics } = chartsStore
 
-const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
+const props = defineProps({
+  hasSelect: {
+    required: true,
+    type: Boolean,
+  },
+  preselectedRange: {
+    type: Object,
+    default: CHART_INTERVALS_PRESETS_OPTIONS[4],
+  },
+})
+
+const range = ref(props.preselectedRange)
 
 await useAsyncData(async() => {
   await loadNamesStatistics()
@@ -36,16 +47,16 @@ await useAsyncData(async() => {
 })
 
 if (process.client) {
-  watch(selectedRange, async() => {
+  watch(range, async() => {
     await loadNamesStatistics()
   })
 }
 
 async function loadNamesStatistics() {
   await fetchNamesStatistics(
-    selectedRange.value.interval,
-    selectedRange.value.limit,
-    selectedRange.value.customInterval)
+    range.value.interval,
+    range.value.limit,
+    range.value.customInterval)
 }
 </script>
 
diff --git a/src/components/TransactionsChartPanel.vue b/src/components/TransactionsChartPanel.vue
index e092e8b73..ec4f549e1 100644
--- a/src/components/TransactionsChartPanel.vue
+++ b/src/components/TransactionsChartPanel.vue
@@ -6,28 +6,28 @@
     <template #end>
       <transactions-select
         v-if="hasSelect"
-        v-model="selectedTxType"
+        v-model="type"
         size="sm"
         class="transactions-chart-panel__select
         transactions-chart-panel__select--desktop
         u-hidden-mobile"/>
 
       <chart-controls
-        v-model="selectedRange"
+        v-model="range"
         class="u-hidden-mobile"/>
     </template>
 
     <line-chart
       :data="transactionsStatistics"
-      :interval="selectedRange.interval"/>
+      :interval="range.interval"/>
 
     <chart-controls
-      v-model="selectedRange"
+      v-model="range"
       class="transactions-chart-panel__controls u-hidden-desktop"/>
 
     <transactions-select
       v-if="hasSelect"
-      v-model="selectedTxType"
+      v-model="type"
       class="select u-hidden-desktop"/>
   </app-panel>
 </template>
@@ -35,6 +35,7 @@
 <script setup>
 import { storeToRefs } from 'pinia'
 import { useChartsStore } from '@/stores/charts'
+import { CHART_INTERVALS_PRESETS_OPTIONS } from '~/utils/constants'
 
 const chartsStore = useChartsStore()
 const { transactionsStatistics } = storeToRefs(chartsStore)
@@ -45,14 +46,14 @@ const props = defineProps({
     required: true,
     type: Boolean,
   },
-  range: {
-    required: true,
+  preselectedRange: {
     type: Object,
+    default: CHART_INTERVALS_PRESETS_OPTIONS[4],
   },
 })
 
-const selectedRange = ref(props.range)
-const selectedTxType = ref(TX_TYPES_OPTIONS[0])
+const range = ref(props.preselectedRange)
+const type = ref(TX_TYPES_OPTIONS[0])
 
 await useAsyncData(async() => {
   await loadTransactionStatistics()
@@ -60,17 +61,17 @@ await useAsyncData(async() => {
 })
 
 if (process.client) {
-  watch([selectedRange, selectedTxType], async() => {
+  watch([range, type], async() => {
     await loadTransactionStatistics()
   })
 }
 
 async function loadTransactionStatistics() {
   await fetchTransactionsStatistics(
-    selectedRange.value.interval,
-    selectedRange.value.limit,
-    selectedRange.value.customInterval,
-    props.hasSelect ? selectedTxType.value.typeQuery : null)
+    range.value.interval,
+    range.value.limit,
+    range.value.customInterval,
+    props.hasSelect ? type.value.typeQuery : null)
 }
 </script>
 
diff --git a/src/pages/accounts/index.vue b/src/pages/accounts/index.vue
index 5d082774f..be6e09581 100644
--- a/src/pages/accounts/index.vue
+++ b/src/pages/accounts/index.vue
@@ -11,7 +11,9 @@
   </page-header>
 
   <accounts-statistics class="accounts-panel"/>
-  <accounts-chart-panel class="accounts-panel"/>
+  <accounts-chart-panel
+    class="accounts-panel"
+    :preselected-range="CHART_INTERVALS_PRESETS_OPTIONS[0]"/>
   <top-accounts-panel v-if="!isLoading"/>
   <loader-panel v-else/>
 </template>
diff --git a/src/pages/charts/transactions.vue b/src/pages/charts/transactions.vue
index ff4b6ef72..645469be9 100644
--- a/src/pages/charts/transactions.vue
+++ b/src/pages/charts/transactions.vue
@@ -15,9 +15,7 @@
       <charts-navigation/>
     </template>
     <template #detail>
-      <transactions-chart-panel
-        :has-select="true"
-        :range="CHART_INTERVALS_PRESETS_OPTIONS[4]"/>
+      <transactions-chart-panel :has-select="true"/>
     </template>
   </NuxtLayout>
 </template>
diff --git a/src/pages/contracts/index.vue b/src/pages/contracts/index.vue
index 6453e1516..d7cb016e0 100644
--- a/src/pages/contracts/index.vue
+++ b/src/pages/contracts/index.vue
@@ -18,7 +18,7 @@
   <template v-if="!isLoading">
     <contracts-chart-panel
       class="contracts-panel"
-      :range="CHART_INTERVALS_PRESETS_OPTIONS[0]"/>
+      :preselected-range="CHART_INTERVALS_PRESETS_OPTIONS[0]"/>
     <contracts-panel class="contracts-panel"/>
   </template>
   <loader-panel v-else/>
diff --git a/src/pages/names/index.vue b/src/pages/names/index.vue
index ff9d50cfd..d3b4ca5ad 100644
--- a/src/pages/names/index.vue
+++ b/src/pages/names/index.vue
@@ -17,7 +17,7 @@
   <template v-if="!isLoading">
     <names-chart-panel
       class="names__names-panel"
-      :range="CHART_INTERVALS_PRESETS_OPTIONS[0]"/>
+      :preselected-range="CHART_INTERVALS_PRESETS_OPTIONS[0]"/>
     <app-tabs v-model="activeTabIndex">
       <app-tab title="Active">
         <names-active-panel/>
diff --git a/src/pages/transactions/index.vue b/src/pages/transactions/index.vue
index 77fcebb3b..d3249aa4f 100644
--- a/src/pages/transactions/index.vue
+++ b/src/pages/transactions/index.vue
@@ -12,7 +12,7 @@
   <transactions-statistics class="transactions-panel"/>
   <transactions-chart-panel
     :has-select="false"
-    :range="CHART_INTERVALS_PRESETS_OPTIONS[0]"
+    :preselected-range="CHART_INTERVALS_PRESETS_OPTIONS[0]"
     class="transactions-panel"/>
   <transactions-panel
     v-if="!isLoading"