diff --git a/src/views/desktop/HomePage.vue b/src/views/desktop/HomePage.vue
index 03649e4f..25a2871c 100644
--- a/src/views/desktop/HomePage.vue
+++ b/src/views/desktop/HomePage.vue
@@ -103,8 +103,8 @@
         </v-col>
 
         <v-col cols="12" md="6">
-            <monthly-income-and-expense-card :data="monthlyIncomeAndExpenseData"
-                :disabled="loadingOverview" :is-dark-mode="isDarkMode" />
+            <monthly-income-and-expense-card :data="monthlyIncomeAndExpenseData" :is-dark-mode="isDarkMode"
+                                             :loading="loadingOverview" :disabled="loadingOverview" />
         </v-col>
     </v-row>
 
@@ -207,6 +207,10 @@ export default {
             const self = this;
             const data = [];
 
+            if (!self.transactionOverview || !self.transactionOverview.thisMonth || !self.transactionOverview.thisMonth.valid) {
+                return data;
+            }
+
             [ 'monthBeforeLast4Months', 'monthBeforeLast3Months', 'monthBeforeLast2Months', 'monthBeforeLastMonth', 'lastMonth', 'thisMonth' ].forEach(fieldName => {
                 if (!Object.prototype.hasOwnProperty.call(self.transactionOverview, fieldName)) {
                     return;
diff --git a/src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue b/src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue
index 4ffb7507..66c7641b 100644
--- a/src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue
+++ b/src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue
@@ -4,7 +4,13 @@
             <span class="text-2xl font-weight-bold">{{ $t('Trend in Income and Expense') }}</span>
         </template>
 
-        <v-chart class="overview-monthly-chart" autoresize :option="chartOptions" />
+        <v-card-text class="overview-monthly-chart overview-monthly-chart-no-data-tips" v-if="!loading && !hasAnyData">
+            <div class="d-flex flex-column align-center justify-center w-100 h-100">
+                <h2 style="margin-top: -40px">{{ $t('No data') }}</h2>
+            </div>
+        </v-card-text>
+
+        <v-chart autoresize class="overview-monthly-chart" :class="{ 'readonly': !hasAnyData }" :option="chartOptions"/>
     </v-card>
 </template>
 
@@ -20,6 +26,7 @@ import {
 
 export default {
     props: [
+        'loading',
         'data',
         'disabled',
         'isDarkMode'
@@ -32,6 +39,21 @@ export default {
         defaultCurrency() {
             return this.userStore.currentUserDefaultCurrency;
         },
+        hasAnyData() {
+            if (!this.data || !this.data.length || this.data.length < 1) {
+                return false;
+            }
+
+            for (let i = 0; i < this.data.length; i++) {
+                const item = this.data[i];
+
+                if (item.incomeAmount > 0 || item.incomeAmount < 0 || item.expenseAmount > 0 || item.expenseAmount < 0) {
+                    return true;
+                }
+            }
+
+            return false;
+        },
         chartOptions() {
             const self = this;
             const monthNames = [];
@@ -244,6 +266,11 @@ export default {
 </script>
 
 <style>
+.overview-monthly-chart-no-data-tips {
+    position: absolute !important;
+    z-index: 10;
+}
+
 .overview-monthly-chart {
     width: 100%;
     height: 400px;