update chart for unusual activity

src/lib/components/FailToDeliver.svelte

@@ -10,6 +10,7 @@
     monthNames,
     removeCompanyStrings,
   } from "$lib/utils";
+  import { goto } from "$app/navigation";
   import highcharts from "$lib/highcharts.ts";
 
   export let data;

src/lib/components/Options/UnusualActivity.svelte

@@ -9,20 +9,15 @@
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
-  import { onMount } from "svelte";
+  import highcharts from "$lib/highcharts.ts";
-  import { init, use } from "echarts/core";
-  import { BarChart, LineChart } from "echarts/charts";
-  import { GridComponent, TooltipComponent } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
-  import { Chart } from "svelte-echarts";
 
-  use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
+  import { onMount } from "svelte";
 
   export let data;
   export let ticker = null;
 
   let isLoaded = false;
-  let optionsData = null;
+  let configContract = null;
 
   let optionHistoryList = [];
   let selectGraphType = "Vol/OI";
@@ -43,7 +38,7 @@
 
   let displayList = rawData?.slice(0, 150) || [];
 
-  let options = plotData();
+  let configUnusual = plotData();
 
   function daysLeft(targetDate) {
     const targetTime = new Date(targetDate).getTime();
@@ -118,170 +113,198 @@
       (a, b) => new Date(a?.date) - new Date(b?.date),
     );
 
-    // Map to aggregate call size, put size, and premiums for each date
+    // Aggregate call size, put size, and premiums for each date
     const aggregatedData = {};
 
     history?.forEach((item) => {
       const { date, optionType, size, premium } = item;
 
-      // Initialize the date in aggregatedData if it doesn't exist
       if (!aggregatedData[date]) {
         aggregatedData[date] = { callSize: 0, putSize: 0, totalPremium: 0 };
       }
 
-      // Aggregate call size, put size, and premium
       if (optionType === "Calls") {
         aggregatedData[date].callSize += size;
       } else if (optionType === "Puts") {
         aggregatedData[date].putSize += size;
       }
 
-      // Add premium
       aggregatedData[date].totalPremium += premium;
     });
 
-    // Extract dates, call data, put data, premiums, and price list
+    // Build data arrays from the aggregated data
     dates = Object.keys(aggregatedData);
     callData = dates.map((date) => aggregatedData[date].callSize);
     putData = dates.map((date) => aggregatedData[date].putSize);
     totalPremiums = dates.map((date) => aggregatedData[date].totalPremium);
 
-    // Match historical prices for the same dates
+    // Get the historical prices for matching dates
     priceList = dates.map((date) => {
       const matchingData = data?.getHistoricalPrice?.find(
         (d) => d?.time === date,
       );
-      return matchingData?.close || null; // Use `null` if no match is found
+      return matchingData?.close || null;
     });
 
+    // Highcharts configuration options
     const options = {
-      animation: false,
+      credits: {
-      tooltip: {
+        enabled: false,
-        trigger: "axis",
+      },
-        hideDelay: 100,
+      chart: {
-        borderColor: "#969696", // Black border color
+        // Removed global type so each series can define its own type.
-        borderWidth: 1, // Border width of 1px
+        backgroundColor: "#09090B",
-        backgroundColor: "#313131", // Optional: Set background color for contrast
+        plotBackgroundColor: "#09090B",
-        textStyle: {
+        height: 360,
-          color: "#fff", // Optional: Text color for better visibility
+        animation: false,
+      },
+      title: {
+        text: `<h3 class="mt-3 mb-1 ">${ticker} Unusual Options Activity</h3>`,
+        style: {
+          color: "white",
+          // Using inline CSS for margin-top and margin-bottom
         },
-        formatter: function (params) {
+        useHTML: true, // Enable HTML to apply custom class styling
-          // Get the timestamp from the first parameter
+      },
-          const timestamp = params[0].axisValue;
+      xAxis: {
-
+        type: "datetime",
-          // Initialize result with timestamp
+        endOnTick: false,
-          let result = timestamp + "<br/>";
+        categories: dates,
-
+        crosshair: {
-          // Add each series data
+          color: "#fff", // Set the color of the crosshair line
-          params?.forEach((param) => {
+          width: 1, // Adjust the line width as needed
-            const marker =
+          dashStyle: "Solid",
-              '<span style="display:inline-block;margin-right:4px;' +
-              "border-radius:10px;width:10px;height:10px;background-color:" +
-              param.color +
-              '"></span>';
-            result +=
-              marker +
-              param.seriesName +
-              ": " +
-              abbreviateNumberWithColor(param.value, false, true) +
-              "<br/>";
-          });
-
-          return result;
         },
-        axisPointer: {
+        labels: {
-          lineStyle: {
+          style: {
             color: "#fff",
           },
-        },
+          distance: 20, // Increases space between label and axis
-      },
+          formatter: function () {
-      silent: true,
+            const date = new Date(this.value);
-      grid: {
+            return date.toLocaleDateString("en-US", {
-        left: $screenWidth < 640 ? "5%" : "2%",
+              month: "short",
-        right: $screenWidth < 640 ? "5%" : "2%",
+              year: "numeric",
-        bottom: "10%",
+            });
-        containLabel: true,
-      },
-      xAxis: [
-        {
-          type: "category",
-          data: dates,
-          axisLabel: {
-            color: "#fff",
-
-            formatter: function (value) {
-              // Assuming dates are in the format 'yyyy-mm-dd'
-              const dateParts = value.split("-");
-              const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
-              const year = parseInt(dateParts[0]);
-              const day = parseInt(dateParts[2]);
-              return `${day} ${monthNames[monthIndex]} ${year}`;
-            },
           },
         },
-      ],
+        tickPositioner: function () {
+          // Create custom tick positions with wider spacing
+          const positions = [];
+          const info = this.getExtremes();
+          const tickCount = 5; // Reduce number of ticks displayed
+          const interval = Math.floor((info.max - info.min) / tickCount);
+
+          for (let i = 0; i <= tickCount; i++) {
+            positions.push(info.min + i * interval);
+          }
+          return positions;
+        },
+      },
       yAxis: [
         {
-          type: "value",
+          gridLineWidth: 1,
-          splitLine: {
+          gridLineColor: "#111827",
-            show: false, // Disable x-axis grid lines
+          labels: {
-          },
+            style: { color: "white" },
-          axisLabel: {
-            show: false, // Hide y-axis labels
           },
+          title: { text: null },
+          opposite: true,
         },
         {
-          type: "value",
+          title: {
-          splitLine: {
+            text: null,
-            show: false, // Disable x-axis grid lines
           },
-          position: "right",
+          gridLineWidth: 0,
-          axisLabel: {
+          labels: {
-            show: false, // Hide y-axis labels
+            enabled: false,
           },
         },
       ],
+      tooltip: {
+        shared: true,
+        useHTML: true,
+        backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
+        borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
+        borderWidth: 1,
+        style: {
+          color: "#fff",
+          fontSize: "16px",
+          padding: "10px",
+        },
+        borderRadius: 4,
+        formatter: function () {
+          // Format the x value to display time in hh:mm format
+          let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date(
+            this?.x,
+          ).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          })}</span><br>`;
+
+          // Loop through each point in the shared tooltip
+          this.points.forEach((point) => {
+            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
+          <span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
+            point.y,
+          )}</span><br>`;
+          });
+
+          return tooltipContent;
+        },
+      },
       series: [
         {
           name: "Call",
-          type: "bar",
+          type: "column",
-          stack: "Put-Call Ratio",
-          emphasis: {
-            focus: "series",
-          },
           data: callData,
-          itemStyle: {
+          color: "#00FC50",
-            color: "#00FC50",
+          borderColor: "#00FC50", // Match border color
+          marker: {
+            enabled: false,
           },
+          animation: false,
         },
         {
           name: "Put",
-          type: "bar",
+          type: "column",
-          stack: "Put-Call Ratio",
-          emphasis: {
-            focus: "series",
-          },
           data: putData,
-          itemStyle: {
+          color: "#EE5365",
-            color: "#EE5365", //'#7A1C16'
+          borderColor: "#EE5365", // Match border color
+          marker: {
+            enabled: false,
           },
+          animation: false,
         },
         {
-          name: "Price", // Name for the line chart
+          name: "Price",
-          type: "line", // Type of the chart (line)
+          type: "area",
-          yAxisIndex: 1, // Use the second y-axis on the right
+          yAxis: 1,
-          data: priceList, // iv60Data (assumed to be passed as priceList)
+          data: priceList,
-          itemStyle: {
+          color: "#fff",
-            color: "#fff", // Choose a color for the line (gold in this case)
+          lineWidth: 1,
+          marker: {
+            enabled: false,
           },
-          lineStyle: {
+          animation: false,
-            width: 2, // Set the width of the line
+          fillColor: {
+            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+            stops: [
+              [0, "rgba(255, 255, 255, 0.1)"],
+              [1, "rgba(255, 255, 255, 0.001)"],
+            ],
           },
-          smooth: true, // Optional: make the line smooth
+          // If you prefer a smooth (curved) line, you can use the "spline" type:
-          showSymbol: false,
+          // type: "spline"
         },
       ],
+
+      legend: {
+        enabled: false,
+      },
     };
+
     return options;
   }
 
@@ -302,174 +325,227 @@
   });
 
   function plotContractHistory() {
-    let data = rawDataHistory?.sort(
+    // Ensure rawDataHistory exists and sort it by date
-      (a, b) => new Date(a?.date) - new Date(b?.date),
+    const sortedData =
-    );
+      rawDataHistory?.sort((a, b) => new Date(a?.date) - new Date(b?.date)) ||
-    let dates = data?.map((item) => item?.date);
+      [];
-    let avgPrice = data?.map((item) => item?.mark);
-    let priceList = data?.map((item) => item?.price);
 
-    let volumeList = data?.map((item) => item?.volume);
+    // Filter out data points that have an undefined price so they don't appear in any series
-    let oiList = data?.map((item) => item?.open_interest);
+    const filteredData = sortedData.filter((item) => item?.price !== undefined);
-    let ivList = data?.map((item) =>
-      Math?.floor(item?.implied_volatility * 100),
-    );
-
-    const createLineSeries = (name, data, color, yAxisIndex = 1) => ({
-      name,
-      type: "line",
-      yAxisIndex,
-      data,
-      itemStyle: { color },
-      lineStyle: { width: 2 },
-      smooth: true,
-      showSymbol: false,
-    });
-
-    const createBarSeries = (name, data, color, stack = null) => ({
-      name,
-      type: "bar",
-      stack,
-      data,
-      itemStyle: { color },
-      emphasis: { focus: "series" },
-    });
 
+    // Build series based on the selected graph type, using filteredData
     let series = [];
-    if (selectGraphType === "Vol/OI") {
+    if (selectGraphType == "Vol/OI") {
       series = [
-        createBarSeries("Volume", volumeList, "#FD7E14"),
+        {
-        createBarSeries("OI", oiList, "#33B890"),
+          name: "Volume",
-        createLineSeries("Avg Fill", avgPrice, "#FAD776"),
+          type: "column",
-        createLineSeries("Stock Price", priceList, "#fff", 2),
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.volume,
+          ]),
+          color: "#FD7E14",
+          borderColor: "#FD7E14",
+          borderRadius: "2px",
+          yAxis: 0,
+          animation: false,
+        },
+        {
+          name: "OI",
+          type: "column",
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.open_interest,
+          ]),
+          color: "#33B890",
+          borderColor: "#33B890",
+          borderRadius: "2px",
+          yAxis: 0,
+          animation: false,
+        },
+        {
+          name: "Avg Fill",
+          type: "spline", // smooth line
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.mark,
+          ]),
+          color: "#FAD776",
+          yAxis: 2,
+          animation: false,
+          marker: { enabled: false },
+        },
+        {
+          name: "Price",
+          type: "spline",
+          yAxis: 1,
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.price,
+          ]),
+          color: "#fff",
+          lineWidth: 1,
+          marker: { enabled: false },
+          animation: false,
+        },
       ];
     } else {
       series = [
-        createLineSeries("IV", ivList, "#B24BF3", 0),
+        {
-        createLineSeries("Avg Fill", avgPrice, "#FAD776"),
+          name: "IV",
-        createLineSeries("Stock Price", priceList, "#fff", 2),
+          type: "spline",
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            Math.floor(item.implied_volatility * 100),
+          ]),
+          color: "#B24BF3",
+          yAxis: 0,
+          animation: false,
+          marker: { enabled: false },
+        },
+        {
+          name: "Avg Fill",
+          type: "spline",
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.mark,
+          ]),
+          color: "#FAD776",
+          yAxis: 2,
+          lineWidth: 1,
+          animation: false,
+          marker: { enabled: false },
+        },
+        {
+          name: "Price",
+          type: "spline",
+          yAxis: 1,
+          data: filteredData.map((item) => [
+            new Date(item.date).getTime(),
+            item.price,
+          ]),
+          color: "#fff",
+          lineWidth: 1,
+          marker: { enabled: false },
+          animation: false,
+        },
       ];
     }
 
+    // Highcharts configuration object
     const options = {
-      animation: false,
+      chart: {
-      tooltip: {
+        backgroundColor: "#09090B",
-        trigger: "axis",
+        animation: false,
-        hideDelay: 100,
+        height: 360,
-        borderColor: "#969696", // Black border color
-        borderWidth: 1, // Border width of 1px
-        backgroundColor: "#313131", // Optional: Set background color for contrast
-        textStyle: {
-          color: "#fff", // Optional: Text color for better visibility
-        },
-        formatter: function (params) {
-          // Get the timestamp from the first parameter
-          const timestamp = params[0].axisValue;
-
-          // Find the matching data point in rawDataHistory based on the date
-          const rawDataPoint = rawDataHistory.find(
-            (item) => item.date === timestamp,
-          );
-
-          // Initialize result with timestamp
-          let result = timestamp + "<br/>";
-
-          // Sort params to ensure Vol appears last
-          params.sort((a, b) => {
-            if (a.seriesName === "Vol") return 1;
-            if (b.seriesName === "Vol") return -1;
-            return 0;
-          });
-
-          // Loop through each series data
-          params?.forEach((param) => {
-            const marker =
-              '<span style="display:inline-block;margin-right:4px;' +
-              "border-radius:10px;width:10px;height:10px;background-color:" +
-              param.color +
-              '"></span>';
-
-            // Check if the series is for IV and add a '%' sign
-            const value =
-              param.seriesName === "IV"
-                ? `${param.value}%`
-                : (param.value?.toLocaleString("en-US") ?? "n/a");
-
-            result += marker + param.seriesName + ": " + value + "<br/>";
-          });
-
-          if (rawDataPoint?.dte !== undefined) {
-            result += `Days to Expiration : ${rawDataPoint.dte}<br/>`;
-          }
-
-          return result;
-        },
-
-        axisPointer: {
-          lineStyle: {
-            color: "#fff",
-          },
-        },
       },
-
+      credits: { enabled: false },
-      silent: true,
+      title: {
-      grid: {
+        text: `<h3 class="mt-3 mb-1">Contract History</h3>`,
-        left: $screenWidth < 640 ? "5%" : "2%",
+        useHTML: true,
-        right: $screenWidth < 640 ? "5%" : "2%",
+        style: { color: "white" },
-        bottom: "20%",
-        containLabel: true,
       },
-      xAxis: [
+      // Disable markers globally on hover for all series
-        {
+      plotOptions: {
-          type: "category",
+        series: {
-          data: dates,
+          marker: {
-          axisLabel: {
+            enabled: false,
-            color: "#fff",
+            states: {
-
+              hover: {
-            formatter: function (value) {
+                enabled: false,
-              // Assuming dates are in the format 'yyyy-mm-dd'
+              },
-              const dateParts = value.split("-");
-              const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
-              const year = parseInt(dateParts[0]);
-              const day = parseInt(dateParts[2]);
-              return `${day} ${monthNames[monthIndex]} ${year}`;
             },
           },
         },
-      ],
+      },
+      xAxis: {
+        type: "datetime",
+        endOnTick: false,
+        crosshair: {
+          color: "#fff",
+          width: 1,
+          dashStyle: "Solid",
+        },
+        labels: {
+          style: { color: "#fff" },
+          distance: 20,
+          formatter: function () {
+            return new Date(this.value).toLocaleDateString("en-US", {
+              month: "short",
+              year: "numeric",
+            });
+          },
+        },
+        tickPositioner: function () {
+          const positions = [];
+          const info = this.getExtremes();
+          const tickCount = 5; // Reduce number of ticks displayed
+          const interval = Math.floor((info.max - info.min) / tickCount);
+
+          for (let i = 0; i <= tickCount; i++) {
+            positions.push(info.min + i * interval);
+          }
+          return positions;
+        },
+      },
       yAxis: [
         {
-          type: "value",
+          gridLineWidth: 1,
-          splitLine: {
+          gridLineColor: "#111827",
-            show: false, // Disable x-axis grid lines
+          labels: { style: { color: "white" } },
-          },
+          title: { text: null },
-          axisLabel: {
+          opposite: true,
-            show: false, // Hide y-axis labels
-          },
         },
         {
-          type: "value",
+          title: { text: null },
-          splitLine: {
+          gridLineWidth: 0,
-            show: false, // Disable x-axis grid lines
+          labels: { enabled: false },
-          },
-          position: "right",
-          axisLabel: {
-            show: false, // Hide y-axis labels
-          },
         },
         {
-          type: "value",
+          title: { text: null },
-          splitLine: {
+          gridLineWidth: 0,
-            show: false, // Disable x-axis grid lines
+          labels: { enabled: false },
-          },
+        },
-          position: "top",
+        {
-          axisLabel: {
+          title: { text: null },
-            show: false, // Hide y-axis labels
+          gridLineWidth: 0,
-          },
+          labels: { enabled: false },
         },
       ],
+      tooltip: {
+        shared: true,
+        useHTML: true,
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        borderColor: "rgba(255, 255, 255, 0.2)",
+        borderWidth: 1,
+        style: {
+          color: "#fff",
+          fontSize: "16px",
+          padding: "10px",
+        },
+        borderRadius: 4,
+        formatter: function () {
+          let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date(
+            this.x,
+          ).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          })}</span><br>`;
+
+          this.points.forEach((point) => {
+            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
+          <span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
+            point.y,
+          )}</span><br>`;
+          });
+          return tooltipContent;
+        },
+      },
+      legend: { enabled: false },
       series: series,
     };
+
     return options;
   }
 
@@ -524,13 +600,13 @@
       });
 
       rawDataHistory = calculateDTE(rawDataHistory, dateExpiration);
-      optionsData = plotContractHistory();
+      configContract = plotContractHistory();
       rawDataHistory = rawDataHistory?.sort(
         (a, b) => new Date(b?.date) - new Date(a?.date),
       );
       optionHistoryList = rawDataHistory?.slice(0, 20);
     } else {
-      optionsData = null;
+      configContract = null;
     }
 
     isLoaded = true;
@@ -627,9 +703,9 @@
     if (typeof window !== "undefined" && selectGraphType) {
       isLoaded = false;
       if (rawDataHistory?.length > 0) {
-        optionsData = plotContractHistory();
+        configContract = plotContractHistory();
       } else {
-        optionsData = null;
+        configContract = null;
       }
 
       isLoaded = true;
@@ -654,9 +730,11 @@
           text="Unusual Options trades with a premium of at least 1 million dollar from big whales."
         />
 
-        <div class="app w-full">
+        <div
-          <Chart {init} {options} class="chart" />
+          class="mt-5 border border-gray-800 rounded"
-        </div>
+          use:highcharts={configUnusual}
+        ></div>
+
         <div class="w-full overflow-x-scroll text-white">
           <table
             class="w-full table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md m-auto mt-4 overflow-x-auto"
@@ -683,7 +761,7 @@
                     class="text-sm sm:text-[1rem] text-start whitespace-nowrap flex justify-between"
                   >
                     <span
-                      class="inline-block {item?.optionType === 'Calls'
+                      class="inline-block px-2 {item?.optionType === 'Calls'
                         ? 'text-[#00FC50]'
                         : 'text-[#FF2F1F]'}"
                     >
@@ -693,7 +771,7 @@
                       on:click={() => handleViewData(item)}
                       on:mouseover={() =>
                         getContractHistory(item?.option_symbol)}
-                      class=" cursor-pointer text-[#04D9FF] sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
+                      class="cursor-pointer text-[#04D9FF] sm:hover:text-white sm:hover:underline sm:hover:underline-offset-4"
                     >
                       {item?.strike}
 
@@ -701,7 +779,7 @@
 
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
-                        class="inline-block w-4 h-4"
+                        class="inline-block w-4 h-4 -mt-1"
                         viewBox="0 0 512 512"
                         fill="#04D9FF"
                         ><path
@@ -774,13 +852,13 @@
 <dialog
   id="optionDetailsDesktopModal"
   class="modal {$screenWidth < 640
-    ? 'modal-bottom'
+    ? 'modal-bottom '
     : ''} bg-[#000] bg-opacity-[0.8] sm:px-5"
 >
   <div
     class="modal-box w-full {rawDataHistory?.length > 0
       ? 'max-w-7xl'
-      : 'w-full'} rounded-md bg-table border-t sm:border border-gray-600 min-h-48 h-auto"
+      : 'w-full'} rounded-md bg-default border-t sm:border border-gray-800 min-h-48 h-auto"
   >
     <form
       method="dialog"
@@ -811,7 +889,7 @@
     </form>
     {#if rawDataHistory?.length > 0}
       <div
-        class="border-b border-gray-600 w-full mt-2 mb-2 sm:mb-3 sm:mt-3"
+        class="border-b border-gray-800 w-full mt-2 mb-2 sm:mb-3 sm:mt-3"
       ></div>
 
       <div class="hidden sm:flex flex-wrap text-white pb-2">
@@ -842,40 +920,24 @@
         </div>
       </div>
 
-      {#if $screenWidth > 640}
+      <div class="pb-8 sm:pb-2 rounded-md bg-default overflow-hidden">
-        <div
+        <div class="flex justify-end ml-auto w-fit mr-2 mt-2">
-          class="pb-8 sm:pb-2 rounded-md bg-table border border-gray-600 overflow-hidden"
+          {#each ["Vol/OI", "IV"] as item}
-        >
+            <label
-          <div class="flex justify-end ml-auto w-fit mr-2 mt-2">
+              on:click={() => (selectGraphType = item)}
-            {#each ["Vol/OI", "IV"] as item}
+              class="px-3 py-1.5 mr-2 {selectGraphType === item
-              <label
+                ? 'bg-white text-black '
-                on:click={() => (selectGraphType = item)}
+                : 'text-white bg-default text-opacity-[0.6] border border-gray-800'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
-                class="px-3 py-1.5 mr-2 {selectGraphType === item
+            >
-                  ? 'bg-white text-black '
+              {item}
-                  : 'text-white bg-table text-opacity-[0.6] border border-gray-600'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
+            </label>
-              >
+          {/each}
-                {item}
-              </label>
-            {/each}
-          </div>
-          <div class="app w-full h-[300px] mt-5">
-            {#if isLoaded}
-              <Chart {init} options={optionsData} class="chart" />
-            {:else}
-              <div class="flex justify-center items-center h-80">
-                <div class="relative">
-                  <label
-                    class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-                  >
-                    <span class="loading loading-spinner loading-md text-white"
-                    ></span>
-                  </label>
-                </div>
-              </div>
-            {/if}
-          </div>
         </div>
-      {/if}
+        <div
+          class="mt-5 border border-gray-800 rounded"
+          use:highcharts={configContract}
+        ></div>
+      </div>
 
       <div
         bind:this={container}
@@ -1020,21 +1082,3 @@
     <button>close</button>
   </form>
 </dialog>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>

src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte

@@ -100,24 +100,36 @@
         opposite: true,
       },
       tooltip: {
+        shared: true,
         useHTML: true,
-        backgroundColor: "#fff",
+        backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
+        borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
+        borderWidth: 1,
         style: {
-          color: "black",
+          color: "#fff",
           fontSize: "16px",
           padding: "10px",
         },
-        borderRadius: 2,
+        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: "#fff",
         formatter: function () {
-          return `<span class="m-auto text-black text-[1rem] font-[501]">${new Date(
+          // Format the x value to display time in hh:mm format
+          let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date(
             this?.x,
           ).toLocaleDateString("en-US", {
             year: "numeric",
             month: "short",
             day: "numeric",
-          })}</span> <br> <span class="text-black font-normal text-sm">${abbreviateNumber(this.y)}</span>`;
+          })}</span><br>`;
+
+          // Loop through each point in the shared tooltip
+          this.points.forEach((point) => {
+            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
+          <span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
+            point.y,
+          )}</span><br>`;
+          });
+
+          return tooltipContent;
         },
       },
       plotOptions: {