Update templates/output.html

templates/output.html

@@ -141,7 +141,7 @@
     </script> -->
 
     <!-- Dot Chart with Markers -->
-    <script>
+    <!-- <script>
       const chartData = {{ chart_data | safe }};
       
       const trace1 = {
@@ -171,6 +171,52 @@
         margin: { t: 40, l: 50, r: 30, b: 50 }
       };
     
+      Plotly.newPlot('line-chart', [trace1, trace2], layout);
+    </script> -->
+
+    <!-- Dot Chart Fixed View -->
+    <script>
+      const chartData = {{ chart_data | safe }};
+    
+      const trace1 = {
+        x: chartData.EngCts,
+        y: chartData.Makable_Predicted,
+        type: 'scatter',
+        mode: 'markers',
+        name: 'Makable_Predicted',
+        marker: { color: '#00BFFF', size: 8 }
+      };
+    
+      const trace2 = {
+        x: chartData.EngCts,
+        y: chartData.Makable_Diff,
+        type: 'scatter',
+        mode: 'markers',
+        name: 'Makable_Diff',
+        marker: { color: '#FF6347', size: 8 }
+      };
+    
+      const layout = {
+        paper_bgcolor: "#04293A",
+        plot_bgcolor: "#041C32",
+        font: { color: "#ECB365" },
+        xaxis: {
+          title: "EngCts",
+          tickangle: 0
+        },
+        yaxis: {
+          title: "Values",
+          tickfont: {
+            size: 10,
+            color: "#ECB365"
+          },
+          automargin: true,           // 🔧 Add space for long labels
+          tickmode: "auto",           // Let Plotly auto-decide tick values
+          nticks: 10,                 // Reduce clutter
+        },
+        margin: { t: 40, l: 80, r: 30, b: 50 } // ⬅️ Increase left margin for Y-axis labels
+      };
+    
       Plotly.newPlot('line-chart', [trace1, trace2], layout);
     </script>