Outshift Logo

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

Data Visualizer 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 agents
useDataVisualizerAction({
addOrUpdateArtifact: (type, data) => {
// Handle chart updates
}
});
return (
<HAXDataVisualizer
type="line"
data={chartData}
options={chartOptions}
/>
);
}

© 2025 Outshift. All Rights Reserved.