Data visualization

A comprehensive suite of AI-powered charting components for displaying data insights including bar charts, line graphs, area charts, and pie charts.

Overview

Props

There is only one prop for the BarGraph component, graphData. Ensure that the graphData prop is an object with the following structure:


export enum StreamEvent {
  Text = 'text',
  ToolCall = 'tool_call',
  ToolReturn = 'tool_return',
  SupportHandoff = 'support_handoff',
  Automation = 'automation',
  CampaignId = 'campaign_id',
  CampaignRequestId = 'campaign_request_id',
  Graph = 'graph',
  Table = 'table',
  ConversationName = 'conversation_name',
  Error = 'error',
}
 
export enum GraphType {
  Bar = 'bar',
  Line = 'line',
  Pie = 'pie',
  Area = 'area',
}
 
/**
 * The data structure for the graph data.
 */
export interface GraphResult {
  type: StreamEvent.Graph;
  data: {
    graph_type: GraphType;
    label: string;
    value_labels: string[];
    graph_data: Array<{
      [key: string]: string | number;
    }>;
  };
}

Resources

Install


pnpm add @camp/ai-data-viz

Variations

The Data visualization package provides four distinct chart types, each optimized for different data presentation needs.

Bar graph

Bar graphs are ideal for comparing discrete categories or showing changes over time with categorical data.


import { BarGraph } from '@camp/ai-data-viz';
 
const barData = {
  data: {
    label: 'month',
    value_labels: ['sales', 'leads'],
    graph_data: [
      { month: 'Jan', sales: 120, leads: 80 },
      { month: 'Feb', sales: 150, leads: 95 },
      { month: 'Mar', sales: 180, leads: 110 },
    ],
  },
};
 
<BarGraph graphData={barData} />;

Line graph

Line graphs excel at showing trends and changes over continuous time periods or ordered categories.


import { LineGraph } from '@camp/ai-data-viz';
 
const lineData = {
  data: {
    label: 'date',
    value_labels: ['engagement', 'conversion'],
    graph_data: [
      { date: '2024-01', engagement: 85, conversion: 12 },
      { date: '2024-02', engagement: 92, conversion: 15 },
      { date: '2024-03', engagement: 88, conversion: 18 },
    ],
  },
};
 
<LineGraph graphData={lineData} />;

Area graph

Area graphs are perfect for showing cumulative totals and the relationship between parts and the whole over time.


import { AreaGraph } from '@camp/ai-data-viz';
 
const areaData = {
  data: {
    label: 'quarter',
    value_labels: ['revenue', 'profit'],
    graph_data: [
      { quarter: 'Q1', revenue: 250000, profit: 45000 },
      { quarter: 'Q2', revenue: 280000, profit: 52000 },
      { quarter: 'Q3', revenue: 320000, profit: 61000 },
    ],
  },
};
 
<AreaGraph graphData={areaData} />;

Pie graph

Pie graphs are best for showing proportional relationships and percentages of a whole dataset.


import { PieGraph } from '@camp/ai-data-viz';
 
const pieData = {
  data: {
    label: 'category',
    value_labels: ['count'],
    graph_data: [
      { category: 'Email', count: 45 },
      { category: 'Social', count: 30 },
      { category: 'Direct', count: 25 },
    ],
  },
};
 
<PieGraph graphData={pieData} />;

Card patterns

All chart components work seamlessly within card containers for dashboard layouts.


import { BarGraph } from '@camp/ai-data-viz';
import { Card, StyledCardHeader, StyledCardBody, ChartWrapper } from '@camp/ai-card';
import { Text } from '@camp/text';
 
<Card as="div">
  <StyledCardHeader>
    <Text type="heading" as="h2" color="primary-on-emphasis">
      Monthly Performance
    </Text>
  </StyledCardHeader>
  <StyledCardBody>
    <ChartWrapper height="400px">
      <BarGraph graphData={chartData} />
    </ChartWrapper>
  </StyledCardBody>
</Card>;

Usage

Best practices

Use bar graphs for comparing discrete categories or time-based categorical data
Choose line graphs for showing trends and continuous data over time
Select area graphs when emphasizing cumulative values or stacked data relationships
Use pie graphs for parts-of-a-whole relationships with 5 or fewer categories
Ensure adequate chart height (minimum 300px) for proper readability
Always provide meaningful labels for axes and data series
Consider responsive behavior when embedding charts in different container sizes

Content guidelines

Chart titles and labels should be clear, descriptive, and use sentence case.

✅ DO

• Use descriptive chart titles: “Monthly sales performance” • Keep axis labels concise: “Revenue ($)” • Use consistent date formats: “Jan 2024” • Include units in labels when applicable

🚫 DON’T

• Use generic titles: “Chart”, “Graph” • Include excessive punctuation in labels • Use abbreviations without context • Overcrowd charts with too many data series

Additional considerations

Charts automatically adapt colors for light and dark themes
Tooltips provide additional context for data points on hover and focus
Text labels truncate responsively with full text available via tooltip
High contrast gradients ensure visibility across different displays
Screen readers can access chart data through structured markup

Breaking changes:

Component names: Chart → BarGraph, LineGraph, AreaGraph, PieGraph
Data format: Requires structured GraphResult format with label, value_labels, and graph_data properties
Props: data prop renamed to graphData with new required structure
Theming: Automatic theme detection replaces manual color configuration