1 files changed, 46 insertions, 0 deletions
diff --git a/frontend/components/PriceChart.tsx b/frontend/components/PriceChart.tsx
new file mode 100644
index 0000000..8ce4ea9
--- /dev/null
+++ b/frontend/components/PriceChart.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import type { Data, Layout } from "plotly.js";
+import type { HistoryPoint } from "@/types/api";
+
+const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });
+
+type Props = {
+  symbol: string;
+  points: HistoryPoint[];
+};
+
+export function PriceChart({ symbol, points }: Props) {
+  const x = points.map((point) => point.date);
+  const y = points.map((point) => point.close ?? null);
+  const data: Data[] = [
+    {
+      x,
+      y,
+      type: "scatter",
+      mode: "lines",
+      name: symbol,
+      line: { color: "#C2AA7A", width: 2.4 },
+      fill: "tozeroy",
+      fillcolor: "rgba(194,170,122,0.10)"
+    }
+  ];
+  const layout: Partial<Layout> = {
+    autosize: true,
+    height: 360,
+    margin: { l: 52, r: 18, t: 18, b: 38 },
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
+    hovermode: "x unified",
+    font: { family: "IBM Plex Mono, monospace", color: "#8E8676" },
+    xaxis: { showgrid: false, zeroline: false },
+    yaxis: { showgrid: true, gridcolor: "#232934", tickprefix: "$", tickformat: ",.2f" }
+  };
+
+  if (!points.length) {
+    return <div className="empty-panel">No price history available for this period.</div>;
+  }
+
+  return <Plot data={data} layout={layout} config={{ displayModeBar: false, responsive: true }} className="chart" useResizeHandler />;
+}