Simple market chart

src/app/market/components/market-sidebar/Chart.tsx

@@ -0,0 +1,96 @@
+import { CandlestickSeries, Chart } from "lightweight-charts-react-components";
+
+export default function MarketChart() {
+  return (
+    <Chart
+      containerProps={{
+        style: { width: "100%", height: "100%" },
+      }}
+      options={{
+        layout: {
+          background: { color: "#131722" }, // Dark background
+          textColor: "#d1d4dc", // Light text
+        },
+        grid: {
+          vertLines: { color: "#2B2B43" }, // Subtle dark grid lines
+          horzLines: { color: "#2B2B43" },
+        },
+      }}
+    >
+      <CandlestickSeries
+        data={[
+          {
+            time: "2018-12-22",
+            open: 32.5,
+            high: 33.0,
+            low: 31.8,
+            close: 32.51,
+          },
+          {
+            time: "2018-12-23",
+            open: 32.51,
+            high: 32.8,
+            low: 30.5,
+            close: 31.11,
+          },
+          {
+            time: "2018-12-24",
+            open: 31.11,
+            high: 31.5,
+            low: 26.9,
+            close: 27.02,
+          },
+          {
+            time: "2018-12-25",
+            open: 27.02,
+            high: 27.8,
+            low: 26.5,
+            close: 27.32,
+          },
+          {
+            time: "2018-12-26",
+            open: 27.32,
+            high: 26.0,
+            low: 24.8,
+            close: 25.17,
+          },
+          {
+            time: "2018-12-27",
+            open: 25.17,
+            high: 29.0,
+            low: 25.0,
+            close: 28.89,
+          },
+          {
+            time: "2018-12-28",
+            open: 28.89,
+            high: 26.0,
+            low: 25.4,
+            close: 25.46,
+          },
+          {
+            time: "2018-12-29",
+            open: 25.46,
+            high: 24.5,
+            low: 23.5,
+            close: 23.92,
+          },
+          {
+            time: "2018-12-30",
+            open: 23.92,
+            high: 23.0,
+            low: 22.5,
+            close: 22.68,
+          },
+          {
+            time: "2018-12-31",
+            open: 22.68,
+            high: 23.0,
+            low: 22.5,
+            close: 22.67,
+          },
+        ]}
+      />
+    </Chart>
+  );
+}

src/app/market/page.tsx

@@ -3,6 +3,7 @@
 import Navbar from "@/components/layout/Navbar";
 import Statusbar from "@/components/layout/Statusbar";
 import MarketSidebar from "./components/market-sidebar/MarketSidebar";
+import Chart from "./components/market-sidebar/Chart";
 
 export default function Market() {
   return (
@@ -10,7 +11,7 @@ export default function Market() {
       <Navbar />
       <section className="w-full h-full flex flex-row">
         <div className="w-full h-svh border-r border-border">
-            
+          <Chart />
         </div>
         <MarketSidebar />
       </section>