Data Visualizer

A powerful chart and graph component built on Chart.js for displaying quantitative data and trends. Perfect for dashboards, analytics, and data-driven insights.

Installation

hax init
hax add artifact data-visualizer

Component Setup

import { HAXDataVisualizer, useDataVisualizerAction } from "@/hax/artifacts/data-visualizer";

export function AnalyticsDashboard() {
  const [artifacts, setArtifacts] = useState([]);

  useDataVisualizerAction({
    addOrUpdateArtifact: (type, data) => {
      // Handle chart updates
    }
  });

  return (
    <HAXDataVisualizer
      type="line"
      data={chartData}
      options={chartOptions}
    />
  );
}