2 variants

Bar Chart

Counts over time as a full width run of bars, and a ranked bar list for top pages, referrers and countries.

Columns

A full width run of bars with the latest stretch in the accent and the history in a quiet tint. Scrolls sideways on a phone.

New signupsWeekly, last six months

Week 1Week 26

New signups
	Signups
Week 1	182
Week 2	204
Week 3	196
Week 4	221
Week 5	240
Week 6	232
Week 7	258
Week 8	249
Week 9	271
Week 10	266
Week 11	290
Week 12	305
Week 13	298
Week 14	322
Week 15	340
Week 16	331
Week 17	356
Week 18	372
Week 19	365
Week 20	391
Week 21	410
Week 22	402
Week 23	428
Week 24	447
Week 25	439
Week 26	468

usage.tsx

import { BarChart } from "@/components/registry/bar-chart";

export function Signups() {
  return (
    <BarChart
      title="New signups"
      name="Signups"
      labels={["Jan", "Feb", "Mar"]}
      values={[320, 410, 380]}
    />
  );
}

"use client";

import { motion, useReducedMotion } from "motion/react";
import { type KeyboardEvent, useState } from "react";
import { ChartFrame, ChartTable, ChartTooltip, formatNumber, useElementWidth } from "@/components/registry/chart-core";
import { cn } from "@/lib/utils";

export interface BarChartProps {
  /** One bar per label, oldest first. */
  labels: string[];
  values: number[];
  /** Names the measure in the tooltip and table: "Signups". */

116 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/bar-chart

Bar list

A ranked list with a bar behind each row, for top pages, referrers or countries. Long labels never truncate early.

Top pages

PageVisitors

/pricing8,420
/components/data-table6,130
/blocks/hero4,870
/docs/install3,210
/components/agent-timeline2,480

usage.tsx

import { BarList } from "@/components/registry/bar-list";

export function TopPages() {
  return (
    <BarList
      title="Top pages"
      items={[{ label: "/pricing", value: 8420, href: "/analytics/pricing" }]}
    />
  );
}

"use client";

import { useReducedMotion } from "motion/react";
import { useRef } from "react";
import { ChartFrame, formatNumber, seriesColor, useSeen } from "@/components/registry/chart-core";
import { cn } from "@/lib/utils";

export interface BarListItem {
  label: string;
  value: number;
  /** Makes the row a link, such as to that page's own report. */
  href?: string;

83 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/bar-list