diff --git a/src/assets/styles/variables.css b/src/assets/styles/variables.css
index 05c9d6c..4747375 100644
--- a/src/assets/styles/variables.css
+++ b/src/assets/styles/variables.css
@@ -11,6 +11,7 @@
   --color-blue-dark: #0D76BF;
   --color-blue-dark-2: #2A3F5F;
   --color-red: #EF553B;
+  --color-yellow: #FBEFCB;
 
 
 
@@ -18,6 +19,7 @@
   --color-bg-light-2: var(--color-gray-light-2);
   --color-bg-light-3: var(--color-gray-light-5);
   --color-bg-dark: var(--color-gray-dark);
+  --color-bg-warning: var(--color-yellow);
   --color-accent: var(--color-blue-medium);
   --color-accent-shade: var(--color-blue-dark);
   --color-border-light: var(--color-gray-light-2);
diff --git a/src/components/Chart.vue b/src/components/Chart.vue
index 073e450..6833c71 100644
--- a/src/components/Chart.vue
+++ b/src/components/Chart.vue
@@ -1,4 +1,8 @@
 <template>
+<div class="chart-container">
+  <div class="chart-worning" v-show="!sqlResult && visible">
+    There is no data to build a chart. Run your sql query and make sure the result is not empty.
+  </div>
   <PlotlyEditor
     v-show="visible"
     :data="state.data"
@@ -13,7 +17,9 @@
     :debug="true"
     :advancedTraceTypeSelector="true"
     class="chart"
+    :style="{ height: !sqlResult ? 'calc(100% - 40px)' : '100%' }"
   />
+</div>
 </template>
 
 <script>
@@ -87,8 +93,18 @@ export default {
 }
 </script>
 <style scoped>
-.chart {
+.chart-container {
   height: calc(100% - 89px);
+}
+.chart-worning {
+  background-color: var(--color-bg-warning);
+  height: 40px;
+  line-height: 40px;
+  color: var(--color-text-base);
+  font-size: 13px;
+  padding: 0 24px;
+}
+.chart {
   border-top: 1px solid var(--color-border);
 }