bugfixing

src/lib/highcharts.ts

@@ -12,32 +12,30 @@ 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.chart || {}),
         events: {
-      ...(config.chart && config.chart.events ? config.chart.events : {}),
+          ...(config.chart?.events || {}),
           load: function () {
             const chart = this;
-  const marginX = 10; // Adjust horizontal margin
+            const marginX = 10;
-  const marginY = 5; // Adjust vertical margin
+            const marginY = 5;
 
-  // Destroy existing watermark if it exists
             if (chart.watermark) {
               chart.watermark.destroy();
             }
 
-  // Get the actual width and height of the plotting area
             const x = chart.chartWidth - marginX;
             const y = chart.chartHeight - marginY;
 
-  // Add watermark
             chart.watermark = chart.renderer
               .text('stocknear.com', x, y)
-    .attr({
+              .attr({ align: 'right' })
-      align: 'right'
-    })
               .css({
                 fontSize: '12px',
                 color: 'rgba(255, 255, 255, 0.6)',
@@ -46,33 +44,36 @@ export default (node, config) => {
               })
               .add();
 
-  // Adjust on redraw
             Highcharts.addEvent(chart, 'redraw', function () {
-    const newX = chart.chartWidth - marginX;
+              chart.watermark.attr({ x: chart.chartWidth - marginX, y: chart.chartHeight - marginY });
-    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