HUD Area Chart

Component 62

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HUD Area Chart to your project and fits it to your theme.

Code

How HUD Area Chart is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}