Bar Chart

A bar chart for comparisons and distributions, with stacked, horizontal, and grouped variants.

Revenue

Monthly revenue (USD)

Last 6 months

Usage in Gaia

Used for side-by-side comparisons, time-bucketed counts, and distribution breakdowns inside AI-generated analytics responses and dashboard cards.

Features

Multiple Variants - Default, stacked, horizontal, and multiple-series modes
Auto Legend - Legend shown automatically when more than one series is present
Custom Colors - Pass a colors array to override the default palette
Auto-Width - Card width scales to data point count for readability
Theme-Aware - Built on the shadcn chart primitive with dark/light token support
Tooltip - Hover tooltip with bar values via ChartTooltipContent

Installation

npx shadcn@latest add https://ui.heygaia.io/r/bar-chart.json

Usage

import { BarChart } from "@/components/ui/bar-chart";
 
const data = [
  { month: "Jan", revenue: 4200 },
  { month: "Feb", revenue: 5100 },
  { month: "Mar", revenue: 4800 },
];
 
export default function Example() {
  return (
    <BarChart
      data={data}
      xKey="month"
      yKeys="revenue"
      title="Revenue"
      description="Monthly revenue"
    />
  );
}

Props

BarChart

Prop	Type	Default	Description
data	Array<Record<string, string \| number>>	-	Chart data rows
xKey	string	-	Key on each row used for the category axis
yKeys	string \| string[]	-	One or more numeric keys to plot as bars
title	string	-	Card title
description	string	-	Card description
footer	string	-	Optional footer text
colors	string[]	CHART_COLORS	Custom palette for series
variant	"default" \| "stacked" \| "horizontal" \| "multiple"	"default"	Layout / grouping mode

Author Tooltip Calendar Event Card

On This Page

Meet GAIA

Your open-source, proactive personal AI assistant with 200+ integrations. GAIA combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.