From 07eb3323f656ba17ff82385cbfec4b20f9f001c7 Mon Sep 17 00:00:00 2001
From: mentalilll <inZaneX@web.de>
Date: Sun, 28 Jul 2024 20:40:24 +0200
Subject: [PATCH] feat: added zoom (optional) feat: added out of window fix for
 tooltip fix: Offset of Triangle on chart fix: sometimes variables are not
 existing error

---
 README.md                   |   8 +-
 dist/bar.js                 |  10 +-
 dist/chart.css              | 189 ++++++++++++++++++++----------------
 dist/chart.js               | 147 +++++++++++++++++++---------
 dist/ghostmap.js            |   8 +-
 dist/ha-vpd-chart-editor.js |  12 ++-
 dist/ha-vpd-chart.js        |   6 +-
 7 files changed, 237 insertions(+), 143 deletions(-)

diff --git a/README.md b/README.md
index 1d2b4df..7082da8 100644
--- a/README.md
+++ b/README.md
@@ -95,12 +95,15 @@ max_temperature: 35 #optional
 min_humidity: 10 #optional
 max_humidity: 100 #optional
 min_height: 200 #optional (minimum height of the chart as px)
-is_bar_view: true #optional
+is_bar_view: false #optional
 enable_tooltip: true #optional
 enable_axes: true #optional
 enable_ghostmap: true #optional
 enable_triangle: false #optional
 enable_crosshair: true #optional
+enable_fahrenheit: false #optional
+enable_zoom: false #optional
+leaf_temperature_offset: 2 #optional
 sensors:
   - temperature: sensor.temperature_2
     humidity: sensor.humidity_2
@@ -108,7 +111,6 @@ sensors:
     name: Tent 1
   - temperature: sensor.temperature_tent_2
     humidity: sensor.humidity_tent_2
-    vpd: sensor.vpd #optional
     name: Tent 2
 vpd_phases: #optional
   - upper: 0.0
@@ -157,6 +159,8 @@ calculateVPD: |2-
 | enable_ghostmap         | boolean | optional     | `true`          | Enable Ghostmap on the Chart                                                                        |
 | enable_triangle         | boolean | optional     | `true`          | Enable Triangle instead of Circle for tooltip marker                                                |
 | enable_crosshair        | boolean | optional     | `true`          | Enable MouseHover Crosshair                                                                         |
+| enable_fahrenheit       | boolean | optional     | `false`         | Enable Fahrenheit instead of Celsius                                                                |
+| enable_zoom             | boolean | optional     | `false`         | Enable zoom function for chart                                                                      |
 | calculateVPD            | string  | optional     | See description | Custom function to calculate VPD.                                                                   |
 
 **Default `vpd_phases` Configuration:**
diff --git a/dist/bar.js b/dist/bar.js
index 2185fc2..ec25ca6 100644
--- a/dist/bar.js
+++ b/dist/bar.js
@@ -177,10 +177,12 @@ export const bar = {
 
             const [temperatures, humidities] = await Promise.all([temperaturesPromise, humiditiesPromise]);
             temperatures.forEach((temperature, tempIndex) => {
-                data['sensor-' + index].push({
-                    time: temperature.last_changed,
-                    vpd: this.calculateVPD(this.toFixedNumber(temperature.state) - (this.config.leaf_temperature_offset || 2), this.toFixedNumber(temperature.state), this.toFixedNumber(humidities[tempIndex].state)).toFixed(2),
-                });
+                if (humidities[tempIndex]) {
+                    data['sensor-' + index].push({
+                        time: temperature.last_changed,
+                        vpd: this.calculateVPD(this.toFixedNumber(temperature.state) - (this.config.leaf_temperature_offset || 2), this.toFixedNumber(temperature.state), this.toFixedNumber(humidities[tempIndex].state)).toFixed(2),
+                    });
+                }
             });
         }
 
diff --git a/dist/chart.css b/dist/chart.css
index 9000110..eb1f81f 100644
--- a/dist/chart.css
+++ b/dist/chart.css
@@ -1,15 +1,18 @@
 ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {
     height: 100%;
-    width:100%;
+    width: 100%;
     min-height: 50px;
-    overflow:hidden;
+    overflow: hidden;
 }
+
 .vpd-chart-view {
-    display:grid;
+    display: grid;
 }
+
 .vpd-chart-view .gray-danger-zone {
     background-color: #999999;
 }
+
 .vpd-chart-view .danger-zone {
     background-color: #ce4234;
 }
@@ -31,82 +34,86 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {
 }
 
 .vpd-card-container, .mouse-horizontal-line, .mouse-vertical-line {
-    cursor:crosshair;
+    cursor: crosshair;
 }
+
+.vpd-card-container:active {
+    cursor: grabbing !important;
+}
+
 .mouse-horizontal-line, .mouse-vertical-line {
     pointer-events: none;
 }
-.vpd-chart-view table {
-    width: 100%;
-    height: 100% !important;
-    min-height: 50px;
-    border: 0;
-    border-collapse: collapse;
-}
-.vpd-chart-view table tbody {
-    height:100% !important;
-    min-height: 50px;
-}
+
 .vpd-chart-view .history-circle {
-    display:none;
+    display: none;
 }
+
 .vpd-chart-view .highlight {
     position: absolute;
-    z-index: 2;
-    cursor:pointer;
-    width:10px;
-    height:10px;
+    z-index: 3;
+    cursor: pointer;
+    width: 10px;
+    height: 10px;
     border-radius: 50%;
-    transform: translate(-50%);
+    transform: translate(-50%, 5px);
     pointer-events: all;
-    background-color:#ffffff;
+    background-color: #ffffff;
 }
+
 .vpd-chart-view .custom-tooltip {
     pointer-events: none;
     transform: translate(-50%);
 }
+
 .vpd-chart-view .highlight:hover {
-    z-index:2;
+    z-index: 4;
 }
 
 .vpd-chart-view .vertical-line {
-    top:0;
-    bottom:0;
-    position:absolute;
+    top: 0;
+    bottom: 0;
+    position: absolute;
     width: 1px;
-    background:rgba(255,255,255,0.4);
+    background: rgba(255, 255, 255, 0.4);
 }
+
 .vpd-chart-view .horizontal-line {
-    left:0;
-    right:0;
-    position:absolute;
+    left: 0;
+    right: 0;
+    position: absolute;
     height: 1px;
     pointer-events: none;
-    background-color:rgba(255,255,255,0.4);
+    background-color: rgba(255, 255, 255, 0.4);
 }
+
 .vpd-chart-view .mousePointer {
-    z-index:2;
+    z-index: 2;
     width: 10px;
-    height:10px;
+    height: 10px;
     border-radius: 50%;
-    position:absolute;
+    position: absolute;
     opacity: 1;
     transform: translate(-50%);
 }
+
 .vpd-chart-view .vpd-container {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
 }
+
 .vpd-chart-view .vpd-row {
-    display:flex;
-    width:100%;
-    height:100%;
+    display: flex;
+    width: 100%;
+    height: 100%;
 }
+
 .vpd-chart-view .cell {
-    height:100%;
+    height: 100%;
 }
+
 .vpd-chart-view .mouse-custom-tooltip,
 .vpd-chart-view .custom-tooltip {
     bottom: 70%;
@@ -123,60 +130,66 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {
     font-size: 12px;
     line-height: 1.2;
     position: absolute;
-    z-index:2;
+    z-index: 2;
 }
+
 .vpd-chart-view .mouse-custom-tooltip {
     right: 10px;
     top: 10px;
-    bottom:auto;
+    bottom: auto;
     pointer-events: none;
 }
+
 .vpd-chart-view .axes {
-    position:absolute;
-    top:0;
-    left:0;
-    right:0;
-    bottom:0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     pointer-events: none;
-    font-size:10px;
+    font-size: 10px;
     font-family: "Segoe UI", Arial, sans-serif;
 }
+
 .vpd-chart-view .axes .humidity-axis {
-    position:absolute;
-    width:100%;
-    top:10px;
+    position: absolute;
+    width: 100%;
+    top: 10px;
     left: 0;
     right: 0;
-    display:flex;
+    display: flex;
 }
+
 .vpd-chart-view .axes .humidity-axis .humidity-axis-label {
     flex-grow: 1;
-    display:inline;
-    text-align:center;
-    border-right:1px solid rgba(255,255,255,0.4);
+    display: inline;
+    text-align: center;
+    border-right: 1px solid rgba(255, 255, 255, 0.4);
 }
 
 .vpd-chart-view .axes .temperature-axis {
-    position:absolute;
-    height:100%;
-    top:0;
-    bottom:0;
-    left:10px;
-    display:flex;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    left: 10px;
+    display: flex;
     flex-direction: column;
 
 }
+
 .vpd-chart-view .axes .temperature-axis .temperature-axis-label {
     flex-grow: 1;
-    display:flex;
+    display: flex;
     align-items: center; /* Zentriert den Inhalt vertikal */
     justify-content: center; /* Zentriert den Inhalt horizontal */
-    border-bottom:1px solid rgba(255,255,255,0.4);
-    color:#000000;
-    font-weight:bold;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+    color: #000000;
+    font-weight: bold;
 }
+
 .vpd-chart-view .axes .temperature-axis .temperature-axis-label:last-child {
-    border-bottom:0;
+    border-bottom: 0;
 }
 
 .vpd-chart-view .vpd-grid {
@@ -202,22 +215,27 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {
     height: 100%;
     width: 1px;
 }
+
 .humidity-axis-label:first-child {
-    display:none;
+    display: none;
 }
+
 .vpd-chart-view .temperature-axis-label, .humidity-axis-label {
     position: absolute;
     font-size: 12px;
-    color: #fff;
+    color: #ffffff;
 }
+
 .vpd-chart-view .custom-tooltip span {
-    padding-left:5px;
-    padding-right:5px;
-    border-right: 1px solid #999;
+    padding-left: 5px;
+    padding-right: 5px;
+    border-right: 1px solid #999999;
 }
+
 .vpd-chart-view .custom-tooltip span:last-child {
     border-right: 0;
 }
+
 .vpd-chart-view .temperature-axis-label {
     transform: translateY(-50%);
     left: 20px; /* Adjust to position outside the chart */
@@ -227,34 +245,37 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {
     transform: translateX(-50%);
     top: 20px; /* Adjust to position outside the chart */
 }
-.vpd-chart-view #sensors,.vpd-chart-view #ghostmap {
-    width:100%;
-    height:100%;
-    position:absolute;
-    top:0;
-    left:0;
+
+.vpd-chart-view #sensors, .vpd-chart-view #ghostmap {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
     pointer-events: none;
 }
 
 .vpd-chart-view #sensors .custom-tooltip {
-    margin-bottom: 14px;
+    margin-bottom: 9px;
 }
+
 .vpd-chart-view #sensors .sensor-triangle {
-    width:16px !important;
-    height:0 !important;
-    padding:0 !important;
-    margin: 0!important;
-    border:0 !important;
-    border-radius:0 !important;
-    background:transparent !important;
+    width: 16px !important;
+    height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    background: transparent !important;
 }
+
 .vpd-chart-view #sensors .sensor-triangle:after {
     position: absolute;
     bottom: 4px;
     left: 49%;
     margin-left: -10px;
     width: 0;
-    border-top: 10px solid #444;
+    border-top: 10px solid #444444;
     border-right: 10px solid transparent;
     border-left: 10px solid transparent;
     content: " ";
diff --git a/dist/chart.js b/dist/chart.js
index 7ed37d0..fd35a06 100644
--- a/dist/chart.js
+++ b/dist/chart.js
@@ -1,6 +1,9 @@
 export const chart = {
     buildChart() {
         if (!this.content) {
+            this.zoomLevel = 1;
+            this.minZoom = 1;
+            this.maxZoom = 2;
             this.innerHTML = `
                 <ha-card class="vpd-chart-view">
                     <style>
@@ -15,16 +18,25 @@ export const chart = {
                 </ha-card>
             `;
             this.content = this.querySelector("div.vpd-card-container");
+            this.sensordom = this.querySelector("div#sensors");
             const table = this.buildTable();
             if (!table.isConnected) {
                 this.content.appendChild(table);
-                this.content.addEventListener('mouseover', this.handleMouseOver.bind(this));
                 this.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
+                this.addEventListener('mousemove', this.handleMouseMove.bind(this));
+
+                if (this.enable_zoom) {
+                    this.addEventListener('wheel', this.handleZoom.bind(this));
+                    this.addEventListener('mousedown', this.handleMouseDown.bind(this));
+                    this.addEventListener('mouseup', this.handleMouseUp.bind(this));
+                }
+
             }
             if (this.enable_ghostmap) {
                 this.updateGhostMap();
                 setInterval(() => this.updateGhostMap(), 3600000); // Update every hour
             }
+
         } else {
             this.refreshTable();
         }
@@ -38,10 +50,63 @@ export const chart = {
             this.content.style.minHeight = `${this.min_height}px`;
             this.querySelector("div.vpd-container").style.minHeight = `${this.min_height}px`;
         }
+        this.buildTooltip();
+
+    },
+
+    handleZoom(event) {
+        event.preventDefault();
+        const zoomDirection = event.deltaY > 0 ? -0.1 : 0.1;
+        const rect = this.content.getBoundingClientRect();
+        const offsetX = (event.clientX - rect.left) / this.zoomLevel;
+        const offsetY = (event.clientY - rect.top) / this.zoomLevel;
+        let newZoomLevel = this.zoomLevel + zoomDirection;
+        newZoomLevel = Math.min(Math.max(newZoomLevel, this.minZoom), this.maxZoom);
+        newZoomLevel = Math.round(newZoomLevel * 100) / 100;  // Rundung auf 2 Dezimalstellen
+        if (newZoomLevel !== this.zoomLevel) {
+            this.zoomLevel = newZoomLevel;
+            if (zoomDirection > 0) {
+                this.content.style.transformOrigin = `${offsetX}px ${offsetY}px`;
+                this.sensordom.style.transformOrigin = `${offsetX}px ${offsetY}px`;
+            }
+
+            this.content.style.transform = `scale(${this.zoomLevel})`;
+            this.sensordom.style.transform = `scale(${this.zoomLevel})`;
+        }
+    },
+    handleMouseDown(event) {
+        this.isPanning = true;
+    },
+    handleMouseUp() {
+        this.isPanning = false;
+    },
+    handleMouseMove(event) {
+        event.preventDefault();
+        const rect = this.content.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        const xPercent = (x / rect.width) * 100;
+        const yPercent = (y / rect.height) * 100;
+
+        const temperatureRange = this.max_temperature - this.min_temperature;
+        const humidityRange = this.max_humidity - this.min_humidity;
+
+        const temperature = this.min_temperature + (temperatureRange * yPercent / 100);
+        const humidity = this.max_humidity - (humidityRange * xPercent / 100);
+        const leafTemperature = temperature - (this.config.leaf_temperature_offset || 2);
+        const vpd = this.calculateVPD(leafTemperature, temperature, humidity);
+
+        this.buildMouseTooltip(event, humidity, temperature, vpd);
+        if (!this.isPanning) return;
+
+        const offsetX = (event.clientX - rect.left) / this.zoomLevel;
+        const offsetY = (event.clientY - rect.top) / this.zoomLevel;
+        this.content.style.transformOrigin = `${offsetX}px ${offsetY}px`;
+        this.sensordom.style.transformOrigin = `${offsetX}px ${offsetY}px`;
 
 
-        this.buildTooltip();
     },
+
     buildTable() {
         const container = document.createElement('div');
         container.className = 'vpd-container';
@@ -79,8 +144,15 @@ export const chart = {
             const totalWidth = segments.reduce((sum, segment) => sum + segment.width, 0);
             const widthAdjustmentFactor = 100 / totalWidth;
 
-            segments.forEach(segment => {
-                const adjustedWidth = (segment.width * widthAdjustmentFactor).toFixed(2);
+            let accumulatedWidth = 0;
+            segments.forEach((segment, index) => {
+                let adjustedWidth;
+                if (index === segments.length - 1) {
+                    adjustedWidth = (100 - accumulatedWidth).toFixed(2); // Ensure the last segment fills the remaining width
+                } else {
+                    adjustedWidth = (segment.width * widthAdjustmentFactor).toFixed(2);
+                    accumulatedWidth += parseFloat(adjustedWidth);
+                }
                 const div = document.createElement('div');
                 div.className = `cell ${segment.className}`;
                 div.style.backgroundColor = segment.color;
@@ -95,14 +167,12 @@ export const chart = {
         container.appendChild(fragment);
 
         return container;
-    },
-    refreshTable() {
+    }, refreshTable() {
         if (this.shouldUpdate()) {
             const table = this.buildTable();
             this.content.replaceChildren(table);
         }
-    },
-    addGridLines() {
+    }, addGridLines() {
         const grid = this.querySelector('.vpd-grid') || document.createElement('div');
         grid.className = 'vpd-grid';
 
@@ -111,14 +181,12 @@ export const chart = {
             this.addVerticalGridLines(grid);
             this.content.appendChild(grid);
         }
-    },
-    removeGridLines() {
+    }, removeGridLines() {
         const grid = this.querySelector('.vpd-grid');
         if (grid) {
             grid.remove();
         }
-    },
-    addHorizontalGridLines(grid) {
+    }, addHorizontalGridLines(grid) {
         const temperatureSteps = 7;
         for (let i = 0; i <= temperatureSteps; i++) {
             const line = document.createElement('div');
@@ -162,23 +230,6 @@ export const chart = {
         this.fetchDataForSensors();
     },
 
-    handleMouseOver(event) {
-        const rect = this.content.getBoundingClientRect();
-        const x = event.clientX - rect.left;
-        const y = event.clientY - rect.top;
-        const xPercent = (x / rect.width) * 100;
-        const yPercent = (y / rect.height) * 100;
-
-        const temperatureRange = this.max_temperature - this.min_temperature;
-        const humidityRange = this.max_humidity - this.min_humidity;
-
-        const temperature = this.min_temperature + (temperatureRange * yPercent / 100);
-        const humidity = this.max_humidity - (humidityRange * xPercent / 100);
-        const leafTemperature = temperature - (this.config.leaf_temperature_offset || 2);
-        const vpd = this.calculateVPD(leafTemperature, temperature, humidity);
-
-        this.buildMouseTooltip(event.target, humidity, temperature, vpd);
-    },
 
     handleMouseLeave() {
         const banner = this.querySelector('.mouse-custom-tooltip');
@@ -255,7 +306,7 @@ export const chart = {
         const horizontalLine = this.querySelector(`.horizontal-line[data-index="${index}"]`) || document.createElement('div');
         horizontalLine.className = `horizontal-line horizontal-line-${index}`;
         horizontalLine.setAttribute('data-index', index.toString());
-        horizontalLine.style.top = `calc(${percentageTemperature}% - 5px)`;
+        horizontalLine.style.top = `calc(${percentageTemperature}%)`;
 
         const verticalLine = this.querySelector(`.vertical-line[data-index="${index}"]`) || document.createElement('div');
         verticalLine.className = `vertical-line vertical-line-${index}`;
@@ -268,8 +319,13 @@ export const chart = {
             tooltip.className = `custom-tooltip custom-tooltip-${index}`;
             tooltip.setAttribute('data-index', index.toString());
             tooltip.innerHTML = `<span><strong>${sensorName}</strong></span> <span>${this.kpa_text ? this.kpa_text + ':' : ''} ${vpd}</span><span>${this.rh_text ? this.rh_text + ':' : ''} ${humidity}%</span><span>${this.air_text ? this.air_text + ':' : ''} ${temperature}${this.unit_temperature}</span>`;
-            tooltip.style.left = `${percentageHumidity}%`;
             tooltip.style.bottom = `${100 - percentageTemperature}%`;
+            tooltip.style.left = `${percentageHumidity}%`;
+            if ((tooltip.offsetLeft + (tooltip.offsetWidth / 2)) > this.content.offsetWidth) {
+                const containerWidth = this.content.offsetWidth;
+                const overflowWidth = (tooltip.offsetLeft + (tooltip.offsetWidth / 2)) - containerWidth;
+                tooltip.style.left = `calc(${percentageHumidity}% - ${overflowWidth}px)`;
+            }
         }
 
         if (!pointer.isConnected) {
@@ -296,16 +352,14 @@ export const chart = {
             }
         });
     },
-
     hideSensorDetails(index) {
         this.querySelectorAll(`.history-circle-${index}`).forEach(circle => circle.style.display = 'none');
         this.querySelectorAll('.custom-tooltip, .horizontal-line, .vertical-line, .sensor-pointer').forEach(el => el.style.display = 'block');
         this.querySelectorAll('.custom-tooltip').forEach(tooltip => tooltip.style.opacity = '1');
     },
-
     buildMouseTooltip(target, targetHumidity = null, targetTemperature = null, targetVpd = null) {
-        const humidity = targetHumidity?.toFixed(2) || parseFloat(target.getAttribute('data-rh')).toFixed(2);
-        const temperature = targetTemperature?.toFixed(2) || parseFloat(target.getAttribute('data-air')).toFixed(2);
+        const humidity = targetHumidity?.toFixed(1) || parseFloat(target.getAttribute('data-rh')).toFixed(1);
+        const temperature = targetTemperature?.toFixed(1) || parseFloat(target.getAttribute('data-air')).toFixed(1);
         const vpd = targetVpd?.toFixed(2) || parseFloat(target.getAttribute('data-vpd')).toFixed(2);
 
         const tooltip = this.querySelector('.mouse-custom-tooltip');
@@ -320,20 +374,19 @@ export const chart = {
 
             let container = this.querySelector('.vpd-card-container');
 
-            const moveHandler = (event) => {
-                const {clientX, clientY} = event;
-                // offset from vpd card container
-                const rect = container.getBoundingClientRect();
-                const x = clientX - rect.left;
-                const y = clientY - rect.top;
+            const {clientX, clientY} = target;
+            // offset from vpd card container
+            const rect = container.getBoundingClientRect();
+            const x = clientX - rect.left;
+            const y = clientY - rect.top;
+            // calculate x and y with this.zoomlevel
+            // relation
 
-                mouseHorizontalLine.style.top = `${y}px`;
-                mouseVerticalLine.style.left = `${x}px`;
-                mouseVerticalLine.style.opacity = `1`;
-                mouseHorizontalLine.style.opacity = `1`;
+            mouseHorizontalLine.style.top = `${y / this.zoomLevel}px`;
+            mouseVerticalLine.style.left = `${x / this.zoomLevel}px`;
+            mouseVerticalLine.style.opacity = `1`;
+            mouseHorizontalLine.style.opacity = `1`;
 
-            };
-            target.addEventListener('mousemove', moveHandler);
         }
     },
 };
diff --git a/dist/ghostmap.js b/dist/ghostmap.js
index 24e7b73..f115c71 100644
--- a/dist/ghostmap.js
+++ b/dist/ghostmap.js
@@ -37,9 +37,11 @@ export const ghostmap = {
     processSensorData(fragment, temperatures, humidities, index) {
         let opacityFade = 1;
         temperatures.forEach((temperature, tempIndex) => {
-            opacityFade -= 0.05;
-            const circle = this.createCircle(index, tempIndex, temperature, humidities[tempIndex].state, opacityFade);
-            fragment.appendChild(circle);
+            if (humidities[tempIndex]) {
+                opacityFade -= 0.05;
+                const circle = this.createCircle(index, tempIndex, temperature, humidities[tempIndex].state, opacityFade);
+                fragment.appendChild(circle);
+            }
         });
     },
 
diff --git a/dist/ha-vpd-chart-editor.js b/dist/ha-vpd-chart-editor.js
index 94bfa18..d8fb46d 100644
--- a/dist/ha-vpd-chart-editor.js
+++ b/dist/ha-vpd-chart-editor.js
@@ -120,6 +120,10 @@ export class HaVpdChartEditor extends HTMLElement {
         return this._config.unit_temperature || 'C';
     }
 
+    get _enable_zoom() {
+        return this._config.enable_zoom || false;
+    }
+
     setConfig(config) {
         this._config = config;
     }
@@ -279,7 +283,12 @@ export class HaVpdChartEditor extends HTMLElement {
                             Enable Fahrenheit
                         </label>
                     </td>
-                    <td></td>
+                    <td>
+                        <label>
+                            <input type="checkbox" id="enable_zoom" configvalue="enable_zoom">
+                            Enable Zoom
+                        </label>
+                    </td>
                 </tr>
             </table>
         </div>
@@ -333,6 +342,7 @@ export class HaVpdChartEditor extends HTMLElement {
             {id: 'enable_crosshair', prop: '_enable_crosshair', type: 'checked'},
             {id: 'enable_tooltip', prop: '_enable_tooltip', type: 'checked'},
             {id: 'enable_fahrenheit', prop: '_enable_fahrenheit', type: 'checked'},
+            {id: 'enable_zoom', prop: '_enable_zoom', type: 'checked'},
             {id: 'ghostmap_hours', prop: '_ghostmap_hours', type: 'value'},
             {id: 'unit_temperature', prop: '_unit_temperature', type: 'value'}
         ];
diff --git a/dist/ha-vpd-chart.js b/dist/ha-vpd-chart.js
index aa08dab..9cf7218 100644
--- a/dist/ha-vpd-chart.js
+++ b/dist/ha-vpd-chart.js
@@ -1,5 +1,5 @@
 // Set version for the card
-window.vpdChartVersion = "1.3.5";
+window.vpdChartVersion = "1.3.6";
 
 import {methods} from './methods.js';
 import {chart} from './chart.js';
@@ -37,6 +37,7 @@ class HaVpdChart extends HTMLElement {
         this.enable_triangle = false;
         this.enable_crosshair = false;
         this.enable_fahrenheit = false;
+        this.enable_zoom = false;
         this.updateRunning = false;
         this.configMemory = {};
         this.ghostmap_hours = 24;
@@ -64,6 +65,7 @@ class HaVpdChart extends HTMLElement {
             enable_triangle: {type: Boolean},
             enable_crosshair: {type: Boolean},
             enable_fahrenheit: {type: Boolean},
+            enable_zoom: {type: Boolean},
             configMemory: {type: Object},
             calculateVPD: {type: Function},
             ghostmap_hours: {type: Number},
@@ -101,7 +103,7 @@ class HaVpdChart extends HTMLElement {
             'max_temperature', 'min_humidity', 'max_humidity', 'min_height',
             'is_bar_view', 'enable_axes', 'enable_ghostmap', 'enable_triangle',
             'enable_tooltip', 'enable_crosshair', 'enable_fahrenheit', 'ghostmap_hours',
-            'unit_temperature'
+            'unit_temperature', 'enable_zoom'
         ];
 
         configKeys.forEach(key => {