Simple market chart

package-lock.json

@@ -10,6 +10,8 @@
       "dependencies": {
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "lightweight-charts": "^5.1.0",
+        "lightweight-charts-react-components": "^1.4.0",
         "lucide-react": "^0.563.0",
         "next": "16.1.6",
         "radix-ui": "^1.4.3",
@@ -4600,6 +4602,12 @@
         "express": ">= 4.11"
       }
     },
+    "node_modules/fancy-canvas": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fancy-canvas/-/fancy-canvas-2.1.0.tgz",
+      "integrity": "sha512-nifxXJ95JNLFR2NgRV4/MxVP45G9909wJTEKz5fg/TZS20JJZA6hfgRVh/bC9bwl2zBtBNcYPjiBE4njQHVBwQ==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -5716,6 +5724,26 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lightweight-charts": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/lightweight-charts/-/lightweight-charts-5.1.0.tgz",
+      "integrity": "sha512-jEAYR4ODYeyNZcWUigsoLTl52rbPmgXnvd5FLIv/ZoA/2sSDw63YKnef8n4yhzum7W926yHeFwlm7ididKb7YQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "fancy-canvas": "2.1.0"
+      }
+    },
+    "node_modules/lightweight-charts-react-components": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/lightweight-charts-react-components/-/lightweight-charts-react-components-1.4.0.tgz",
+      "integrity": "sha512-FWzEiQDhQaQ04l6kV2fzsODK6jCrzbLOai+r6oEvCqC3tniXjKUAFHbTUlemII7PfiWYwyVAVgl1XRv72Q8Phw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "lightweight-charts": ">=5 < 6",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",

package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lightweight-charts": "^5.1.0",
+    "lightweight-charts-react-components": "^1.4.0",
     "lucide-react": "^0.563.0",
     "next": "16.1.6",
     "radix-ui": "^1.4.3",

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>