bugfixing

src/lib/highcharts.ts

@@ -12,67 +12,68 @@ if (browser) {
 export default (node, config) => {
   const redraw = true;
   const oneToOne = true;
+  let chart = null;
 
-  // Merge our watermark load event with any provided chart events
+  const createChart = () => {
-  const mergedChartOptions = {
+    chart = Highcharts.chart(node, {
-    ...(config.chart || {}),
+      ...config,
-    events: {
+      chart: {
-      ...(config.chart && config.chart.events ? config.chart.events : {}),
+        ...(config.chart || {}),
-     load: function () {
+        events: {
-  const chart = this;
+          ...(config.chart?.events || {}),
-  const marginX = 10; // Adjust horizontal margin
+          load: function () {
-  const marginY = 5; // Adjust vertical margin
+            const chart = this;
+            const marginX = 10;
+            const marginY = 5;
 
-  // Destroy existing watermark if it exists
+            if (chart.watermark) {
-  if (chart.watermark) {
+              chart.watermark.destroy();
-    chart.watermark.destroy();
+            }
-  }
 
-  // Get the actual width and height of the plotting area
+            const x = chart.chartWidth - marginX;
-  const x = chart.chartWidth - marginX;
+            const y = chart.chartHeight - marginY;
-  const y = chart.chartHeight - marginY;
 
-  // Add watermark
+            chart.watermark = chart.renderer
-  chart.watermark = chart.renderer
+              .text('stocknear.com', x, y)
-    .text('stocknear.com', x, y)
+              .attr({ align: 'right' })
-    .attr({
+              .css({
-      align: 'right'
+                fontSize: '12px',
-    })
+                color: 'rgba(255, 255, 255, 0.6)',
-    .css({
+                fontWeight: 'medium',
-      fontSize: '12px',
+                pointerEvents: 'none'
-      color: 'rgba(255, 255, 255, 0.6)',
+              })
-      fontWeight: 'medium',
+              .add();
-      pointerEvents: 'none'
-    })
-    .add();
 
-  // Adjust on redraw
+            Highcharts.addEvent(chart, 'redraw', function () {
-  Highcharts.addEvent(chart, 'redraw', function () {
+              chart.watermark.attr({ x: chart.chartWidth - marginX, y: chart.chartHeight - marginY });
-    const newX = chart.chartWidth - marginX;
+            });
-    const newY = chart.chartHeight - marginY;
+          }
-    chart.watermark.attr({ x: newX, y: newY });
+        }
-  });
+      }
-}
+    });
-
-    }
   };
 
-  const chart = Highcharts.chart(node, {
+  createChart();
-    ...config,
+
-    chart: mergedChartOptions,
+  // Resize observer with optimized logic
+  const resizeObserver = new ResizeObserver(() => {
+    if (chart) {
+      const newWidth = node.clientWidth;
+      const newHeight = 360; // Let height be auto-adjusted
+
+      // **Dynamically update size without recreating the chart**
+      chart?.setSize(newWidth, newHeight, false);
+    }
   });
+  resizeObserver.observe(node);
 
   return {
     update(newConfig) {
       chart.update(newConfig, redraw, oneToOne);
     },
     destroy() {
-      chart.destroy();
+      resizeObserver?.disconnect();
-    },
+      if (chart) chart?.destroy();
-    /*
+    }
-    exportChart(options = {}, chartOptions = {}) {
-      chart.exportChart(options, chartOptions);
-    },
-    */
   };
 };

src/routes/market-flow/+page.svelte

@@ -258,7 +258,6 @@
         backgroundColor: "#09090B",
         plotBackgroundColor: "#09090B",
         height: 360, // Set the maximum height for the chart
-        reflow: true, // Automatically resize the chart when the container resizes
         animation: false,
       },
 
@@ -431,7 +430,7 @@
   description="Get real-time insights on S&P 500 market flow sentiment through options premium analysis. Track trends and make informed trading decisions."
 />
 
-<section class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden">
+<section class="w-full overflow-hidden">
   <div class="w-full overflow-hidden m-auto">
     <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
       <div