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 with support for all major chart types.
Preview

Installation
Schema & Prompt Control
Conversation
Installation
Instructions
# Initialize HAX in your project agntcy-hax init # Add the component agntcy-hax add artifact data-visualizer
Usage
The data visualizer component integrates with AI agents through CopilotKit. Users interact with AI agents through natural language, and the agents automatically create appropriate charts and graphs.
Component Setup
Setup
import { HAXDataVisualizer, useDataVisualizerAction } from "@/hax/artifacts/data-visualizer";export function AnalyticsDashboard() {const [artifacts, setArtifacts] = useState([]);// Register data visualizer actions for AI agentsuseDataVisualizerAction({addOrUpdateArtifact: (type, data) => {// Handle chart updates}});return (<HAXDataVisualizertype="line"data={chartData}options={chartOptions}/>);}
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 with support for all major chart types.
Preview

Installation
Schema & Prompt Control
Conversation
Installation
Instructions
# Initialize HAX in your project agntcy-hax init # Add the component agntcy-hax add artifact data-visualizer
Usage
The data visualizer component integrates with AI agents through CopilotKit. Users interact with AI agents through natural language, and the agents automatically create appropriate charts and graphs.
Component Setup
Setup
import { HAXDataVisualizer, useDataVisualizerAction } from "@/hax/artifacts/data-visualizer";export function AnalyticsDashboard() {const [artifacts, setArtifacts] = useState([]);// Register data visualizer actions for AI agentsuseDataVisualizerAction({addOrUpdateArtifact: (type, data) => {// Handle chart updates}});return (<HAXDataVisualizertype="line"data={chartData}options={chartOptions}/>);}