diff --git a/src/graph_line_archive_config.inc b/src/graph_line_archive_config.inc
new file mode 100644
index 0000000..6f55697
--- /dev/null
+++ b/src/graph_line_archive_config.inc
@@ -0,0 +1,80 @@
+#encoding UTF-8
+## +-----------------------------------------------------------------------------------+
+## |    graph_line_archive_config.inc             JS config for default line charts    |
+## +-----------------------------------------------------------------------------------+
+
+chart: {
+    type: 'line',
+    zoom: {
+        enabled: false,
+        type: 'x',  
+        autoScaleYaxis: false,
+    },
+},
+
+dataLabels: {
+    enabled: false
+},
+
+stroke: {
+    width: 0,
+},
+
+plotOptions: {
+    line: {
+      borderRadius: 2,
+    }
+},
+
+fill: {
+    opacity: 0.7
+},
+
+markers: {
+    size: 4,
+    strokeWidth: 1,
+    strokeOpacity: 0.5,
+    strokeDashArray: 0,
+    fillOpacity: 0.7,
+    shape: "circle",
+    radius: 1,
+},
+
+xaxis: {
+    type: 'datetime',
+    tickAmount: 8,
+    trim: true,
+    labels: {
+        hideOverlappingLabels: true,
+        tickAmount: 8,
+        rotateAlways: false,
+        hideOverlappingLabels: true,
+        showDuplicates: false,
+        trim: true,
+        formatter: function(val, timestamp) {
+            return moment.unix(timestamp).format("$Extras.Formatting.datetime_graph_archive");
+        }
+    }
+},
+
+grid: {
+    show: true,
+    strokeDashArray: 0,
+    position: 'back',
+    xaxis: {
+        lines: {
+            show: true
+        }
+    },
+    yaxis: {
+        lines: {
+            show: true
+        }
+    },
+},
+
+tooltip: {
+    x: {
+        format: "$Extras.Formatting.datetime_graph_tooltip"
+    }
+},
diff --git a/src/graph_line_config.inc b/src/graph_line_config.inc
new file mode 100644
index 0000000..cd73c19
--- /dev/null
+++ b/src/graph_line_config.inc
@@ -0,0 +1,80 @@
+#encoding UTF-8
+## +---------------------------------------------------------------------------+
+## |    graph_line_config.inc             JS config for default line charts    |
+## +---------------------------------------------------------------------------+
+
+chart: {
+    type: 'line',
+    zoom: {
+        enabled: false,
+        type: 'x',  
+        autoScaleYaxis: false,
+    },
+},
+
+dataLabels: {
+    enabled: false
+},
+
+stroke: {
+    width: 0,
+},
+
+plotOptions: {
+    line: {
+      borderRadius: 2,
+    }
+},
+
+fill: {
+    opacity: 0.7
+},
+
+markers: {
+    size: 4,
+    strokeWidth: 1,
+    strokeOpacity: 0.5,
+    strokeDashArray: 0,
+    fillOpacity: 0.7,
+    shape: "circle",
+    radius: 1,
+},
+
+xaxis: {
+    type: 'datetime',
+    tickAmount: 8,
+    trim: true,
+    labels: {
+        hideOverlappingLabels: true,
+        tickAmount: 8,
+        rotateAlways: false,
+        hideOverlappingLabels: true,
+        showDuplicates: false,
+        trim: true,
+        formatter: function(val, timestamp) {
+            return moment.unix(timestamp).format("$Extras.Formatting.datetime_graph_label");
+        }
+    }
+},
+
+grid: {
+    show: true,
+    strokeDashArray: 0,
+    position: 'back',
+    xaxis: {
+        lines: {
+            show: true
+        }
+    },
+    yaxis: {
+        lines: {
+            show: true
+        }
+    },
+},
+
+tooltip: {
+    x: {
+        format: "$Extras.Formatting.datetime_graph_tooltip"
+    }
+},
diff --git a/src/index.html.tmpl b/src/index.html.tmpl
index 23a0cf1..e57b51a 100644
--- a/src/index.html.tmpl
+++ b/src/index.html.tmpl
@@ -230,11 +230,16 @@
 new ApexCharts(document.querySelector('#$id'), {
   ...graph_${type}_config,
   yaxis: {
-    labels: {
-      formatter: function (val) {
-        return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
-      }
-    }
+    #if $name == "windDir"
+        max: 360,
+        min: 0,
+        tickAmount: 8,
+    #end if
+        labels: {
+            formatter: function (val) {
+                return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; 
+            }
+        },
   },
   series: [
     {
@@ -279,10 +284,12 @@ new ApexCharts(document.querySelector('#$id'), {
   var graph_bar_config = {
     #include "graph_bar_config.inc"
   }
-
   var graph_radar_config = {
     #include "graph_radar_config.inc"
   }
+  var graph_line_config = {
+    #include "graph_line_config.inc"
+  }
 
   // outTemp + Dewpoint
   $getChartJsCode("outTemp", "outTempchart", "area", "outTemp", "dewpoint")
@@ -302,6 +309,7 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Wind
   $getChartJsCode("windSpeed", "windSpeedchart", "area", "windSpeed", "windGust", "max")
+  $getChartJsCode("windDir", "windDirchart", "line", "windDir")
 
   // outHumidity
   $getChartJsCode("outHumidity", "outHumiditychart", "area", "outHumidity")
diff --git a/src/month-%Y-%m.html.tmpl b/src/month-%Y-%m.html.tmpl
index 4afb10e..0f7fea2 100644
--- a/src/month-%Y-%m.html.tmpl
+++ b/src/month-%Y-%m.html.tmpl
@@ -218,11 +218,11 @@
 new ApexCharts(document.querySelector('#$id'), {
   ...graph_${type}_config,
   yaxis: {
-    labels: {
-      formatter: function (val) {
-        return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
-      }
-    }
+        labels: {
+            formatter: function (val) {
+                return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
+            }
+        },
   },
   series: [
     {
@@ -259,11 +259,16 @@ new ApexCharts(document.querySelector('#$id'), {
 new ApexCharts(document.querySelector('#$id'), {
   ...graph_${type}_config,
   yaxis: {
-    labels: {
-      formatter: function (val) {
-        return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
-      }
-    }
+    #if $name == "windDir"
+        max: 360,
+        min: 0,
+        tickAmount: 8,
+    #end if
+        labels: {
+            formatter: function (val) {
+                return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
+            }
+        },
   },
   series: [
     {
@@ -310,10 +315,12 @@ new ApexCharts(document.querySelector('#$id'), {
   var graph_bar_config = {
     #include "graph_bar_archive_config.inc"
   }
-
   var graph_radar_config = {
     #include "graph_radar_config.inc"
   }
+  var graph_line_config = {
+    #include "graph_line_archive_config.inc"
+  }
 
   // outTemp + Dewpoint
   $getChartJsCode("outTemp", "outTempchart", "area", "outTemp", "dewpoint")
@@ -333,6 +340,7 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Wind
   $getChartJsCode("windSpeed", "windSpeedchart", "area", "windSpeed", "windGust", "max")
+  $getChartJsCode("windDir", "windDirchart", "line", "windDir")
 
   // outHumidity
   $getChartJsCode("outHumidity", "outHumiditychart", "area", "outHumidity")
diff --git a/src/month.html.tmpl b/src/month.html.tmpl
index ef16405..189f51e 100644
--- a/src/month.html.tmpl
+++ b/src/month.html.tmpl
@@ -212,11 +212,16 @@
 new ApexCharts(document.querySelector('#$id'), {
   ...graph_${type}_config,
   yaxis: {
-    labels: {
-      formatter: function (val) {
-        return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
-      }
-    }
+    #if $name == "windDir"
+        max: 360,
+        min: 0,
+        tickAmount: 8,
+    #end if
+        labels: {
+            formatter: function (val) {
+                return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
+            }
+        },
   },
   series: [
     {
@@ -255,6 +260,10 @@ new ApexCharts(document.querySelector('#$id'), {
 <script type="text/javascript">
   // Config templates
 
+  var graph_line_config = {
+    #include "graph_line_config.inc"
+  }
+
   var graph_area_config = {
     #include "graph_area_config.inc"
   }
@@ -284,6 +293,7 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Wind
   $getChartJsCode("windSpeed", "windSpeedchart", "area", "windSpeed", "windGust", "max")
+  $getChartJsCode("windDir", "windDirchart", "line", "windDir")
 
   // outHumidity
   $getChartJsCode("outHumidity", "outHumiditychart", "area", "outHumidity")
diff --git a/src/skin.conf b/src/skin.conf
index 1dcb2e5..42ca076 100644
--- a/src/skin.conf
+++ b/src/skin.conf
@@ -199,7 +199,7 @@
         values_order = outTemp, outHumidity, barometer, windSpeed, rain, snowDepth, dewpoint, windchill, heatindex, inTemp, inHumidity, UV, ET, radiation, appTemp, cloudbase, extraTemp1, extraHumid1, extraTemp2, extraHumid2, extraTemp3, extraHumid3, extraTemp4, extraHumid4, extraTemp5, extraHumid5, extraTemp6, extraHumid6, extraTemp7, extraHumid7, extraTemp8, extraHumid8
 
         # The order of chart cards (right column)
-        charts_order = outTemp, windchill, barometer, rain, snowDepth, windSpeed, windvec, UV, ET, radiation, outHumidity, inTemp, inHumidity, appTemp, cloudbase, extraTemp1, extraHumid1, extraTemp2, extraHumid2, extraTemp3, extraHumid3, extraTemp4, extraHumid4, extraTemp5, extraHumid5, extraTemp6, extraHumid6, extraTemp7, extraHumid7, extraTemp8, extraHumid8
+        charts_order = outTemp, windchill, barometer, rain, snowDepth, windSpeed, windDir, windvec, UV, ET, radiation, outHumidity, inTemp, inHumidity, appTemp, cloudbase, extraTemp1, extraHumid1, extraTemp2, extraHumid2, extraTemp3, extraHumid3, extraTemp4, extraHumid4, extraTemp5, extraHumid5, extraTemp6, extraHumid6, extraTemp7, extraHumid7, extraTemp8, extraHumid8
 
         # The order of cards on telemetry page
         telemetry_order = rxCheckPercent, txBatteryStatus, windBatteryStatus, rainBatteryStatus, outTempBatteryStatus, inTempBatteryStatus, consBatteryVoltage, heatingVoltage, supplyVoltage, referenceVoltage, extraBatteryStatus1, extraBatteryStatus2, extraBatteryStatus3, extraBatteryStatus4, extraBatteryStatus5, extraBatteryStatus6, extraBatteryStatus7, extraBatteryStatus8
diff --git a/src/week.html.tmpl b/src/week.html.tmpl
index 72cce48..197d362 100644
--- a/src/week.html.tmpl
+++ b/src/week.html.tmpl
@@ -212,11 +212,16 @@
 new ApexCharts(document.querySelector('#$id'), {
   ...graph_${type}_config,
   yaxis: {
-    labels: {
-      formatter: function (val) {
-        return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
-      }
-    }
+    #if $name == "windDir"
+        max: 360,
+        min: 0,
+        tickAmount: 8,
+    #end if
+        labels: {
+            formatter: function (val) {
+                return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; 
+            }
+        },
   },
   series: [
     {
@@ -255,6 +260,10 @@ new ApexCharts(document.querySelector('#$id'), {
 <script type="text/javascript">
   // Config templates
 
+  var graph_line_config = {
+    #include "graph_line_config.inc"
+  }
+
   var graph_area_config = {
     #include "graph_area_config.inc"
   }
@@ -284,6 +293,7 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Wind
   $getChartJsCode("windSpeed", "windSpeedchart", "area", "windSpeed", "windGust", "max")
+  $getChartJsCode("windDir", "windDirchart", "line", "windDir")
 
   // outHumidity
   $getChartJsCode("outHumidity", "outHumiditychart", "area", "outHumidity")
diff --git a/src/year-%Y.html.tmpl b/src/year-%Y.html.tmpl
index 02a0fa8..9804184 100644
--- a/src/year-%Y.html.tmpl
+++ b/src/year-%Y.html.tmpl
@@ -134,6 +134,7 @@
       </div>
 
       #for $month in $year.months
+        #if $month.outTemp.has_data
         <div class="col-12 col-lg-6 mb-4 text-center">
           <div class="card">
             <div class="card-body">
@@ -172,7 +173,8 @@
             </div>
           </div>
         </div>
-        #end for
+        #end if
+      #end for
 
     </div>
 
@@ -261,12 +263,12 @@
 
 new ApexCharts(document.querySelector('#$id'), {
   ...graph_${type}_config,
-  yaxis: {
-    labels: {
-      formatter: function (val) {
-        return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
-      }
-    }
+  yaxis: { 
+        labels: {
+            formatter: function (val) {
+                return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
+            }
+        },
   },
   series: [
     {
@@ -303,11 +305,16 @@ new ApexCharts(document.querySelector('#$id'), {
 new ApexCharts(document.querySelector('#$id'), {
   ...graph_${type}_config,
   yaxis: {
-    labels: {
-      formatter: function (val) {
-        return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
-      }
-    }
+    #if $name == "windDir"
+        max: 360,
+        min: 0,
+        tickAmount: 8,
+    #end if
+        labels: {
+            formatter: function (val) {
+                return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
+            }
+        },
   },
   series: [
     {
@@ -348,16 +355,22 @@ new ApexCharts(document.querySelector('#$id'), {
 <script type="text/javascript">
   // Config templates
 
+  var graph_line_config = {
+    #include "graph_line_archive_config.inc"
+  }
+
   var graph_area_config = {
     #include "graph_area_archive_config.inc"
   }
   var graph_bar_config = {
     #include "graph_bar_archive_config.inc"
   }
-
   var graph_radar_config = {
     #include "graph_radar_config.inc"
   }
+  var graph_line_config = {
+    #include "graph_line_archive_config.inc"
+  }
 
   // outTemp + Dewpoint
   $getChartJsCode("outTemp", "outTempchart", "area", "outTemp", "dewpoint")
@@ -377,6 +390,7 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Wind
   $getChartJsCode("windSpeed", "windSpeedchart", "area", "windSpeed", "windGust", "max")
+  $getChartJsCode("windDir", "windDirchart", "line", "windDir")
 
   // outHumidity
   $getChartJsCode("outHumidity", "outHumiditychart", "area", "outHumidity")
diff --git a/src/year.html.tmpl b/src/year.html.tmpl
index 8780a77..4356944 100644
--- a/src/year.html.tmpl
+++ b/src/year.html.tmpl
@@ -216,11 +216,11 @@
 new ApexCharts(document.querySelector('#$id'), {
   ...graph_${type}_config,
   yaxis: {
-    labels: {
-      formatter: function (val) {
-        return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
-      }
-    }
+        labels: {
+            formatter: function (val) {
+                return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; 
+            }
+        },
   },
   series: [
     {
@@ -257,11 +257,16 @@ new ApexCharts(document.querySelector('#$id'), {
 new ApexCharts(document.querySelector('#$id'), {
   ...graph_${type}_config,
   yaxis: {
-    labels: {
-      formatter: function (val) {
-        return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
-      }
-    }
+    #if $name == "windDir"
+        max: 360,
+        min: 0,
+        tickAmount: 8,
+    #end if
+        labels: {
+            formatter: function (val) {
+                return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
+            }
+        },
   },
   series: [
     {
@@ -302,6 +307,10 @@ new ApexCharts(document.querySelector('#$id'), {
 <script type="text/javascript">
   // Config templates
 
+  var graph_line_config = {
+    #include "graph_line_archive_config.inc"
+  }
+
   var graph_area_config = {
     #include "graph_area_archive_config.inc"
   }
@@ -331,6 +340,7 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Wind
   $getChartJsCode("windSpeed", "windSpeedchart", "area", "windSpeed", "windGust", "max")
+  $getChartJsCode("windDir", "windDirchart", "line", "windDir")
 
   // outHumidity
   $getChartJsCode("outHumidity", "outHumiditychart", "area", "outHumidity")
diff --git a/src/yesterday.html.tmpl b/src/yesterday.html.tmpl
index 3c52540..c178ab0 100644
--- a/src/yesterday.html.tmpl
+++ b/src/yesterday.html.tmpl
@@ -231,11 +231,16 @@ half_length4 = Math.ceil(series4data.length / 2);
 new ApexCharts(document.querySelector('#$id'), {
   ...graph_${type}_config,
   yaxis: {
-    labels: {
-      formatter: function (val) {
-        return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)";
-      }
-    }
+    #if $name == "windDir"
+        max: 360,
+        min: 0,
+        tickAmount: 8,
+    #end if
+        labels: {
+            formatter: function (val) {
+                return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; 
+            }
+        },
   },
   series: [
     {
@@ -278,6 +283,10 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Config templates
 
+  var graph_line_config = {
+    #include "graph_line_config.inc"
+  }
+
   var graph_area_config = {
     #include "graph_area_config.inc"
   }
@@ -307,6 +316,7 @@ new ApexCharts(document.querySelector('#$id'), {
 
   // Wind
   $getChartJsCode("windSpeed", "windSpeedchart", "area", "windSpeed", "windGust", "max")
+  $getChartJsCode("windDir", "windDirchart", "line", "windDir")
 
   // outHumidity
   $getChartJsCode("outHumidity", "outHumiditychart", "area", "outHumidity")