Components
HUD Area Chart
This is a stylized HUD-style area chart component with an SVG-based sci-fi frame, interactive data hover, and dynamic theming support. It overlays a custom dot-matrix grid, uses a clipped polygon container to shape the graph, and reacts to pointer movement by displaying real-time data feedback in the corner. Perfect for futuristic dashboards, HUDs, gaming overlays, trading UIs, or any app that needs immersive data visualization with retro-tech or cyberpunk aesthetics.
"use client";
import { HudAreaChart } from "@/components/ui/hud-area-chart-1";
const settings = {
showYAxis: false,
dotSize: 0.8,
dotOpacity: 0.1,
scale: 1,
};
const data = [
{ time: "00:00", value: 40 },
{ time: "01:00", value: 55 },
{ time: "02:00", value: 48 },
{ time: "03:00", value: 70 },
{ time: "04:00", value: 62 },
{ time: "05:00", value: 85 },
{ time: "06:00", value: 78 },
{ time: "07:00", value: 95 },
{ time: "08:00", value: 88 },
{ time: "09:00", value: 110 },
];
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
// The chart is drawn in the current text colour, so it inverts with the
// theme instead of being painted white on a card that is only dark.
return (
<div className="h-screen w-screen flex items-center justify-center bg-background text-foreground">
<HudAreaChart
data={data}
gradientColor="currentColor"
borderColor="currentColor"
dotColor="currentColor"
{...s}
/>
</div>
);
}