Installation
npx kinetic-ui-cli@latest add Usage
This chart uses `@react-three/fiber` and `@react-three/drei` to draw a 3D line in space, providing a highly immersive alternative to standard 2D SVG charts.
import { WebGLLineChart } from "@/components/creative/webgl-line-chart";
export function Dashboard() {
const data = [10, 20, 15, 30, 25, 40, 50, 45, 60];
return (
<div className="w-full">
<WebGLLineChart data={data} color="#10b981" />
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | [] | Array of numerical data points to plot. |
color | string | '#8b5cf6' | Hex color for the neon line and particles. |
className | string | undefined | Additional CSS classes for the chart container. |
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { WebGLLineChart } from "@/components/creative/webgl-line-chart";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { WebGLLineChart } from "@/components/creative/webgl-line-chart";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<WebGLLineChart
data{10}
color="example"
/>
</div>
);
}