Skip to content
AJS InnovationsUI

Patterns

Chart panel

A compact chart surface with period selection and a summary footer.

Income

Income012AprMayJunJulAugSep

Total Income

₹0.00

Interactive local example · fictional data

The Code tab contains this preview’s complete source, including sample data and interaction state. Load the package stylesheet and Switzer font as described in the installation guide. Additional layout utilities require Tailwind CSS in your application.

API reference

PropTypeDefault
title / totalstringrequired
points{ label: string; value: number }[]required
color"income" | "expense""income"
period / onPeriodChangestring / (period) => void—

Primitives also accept their underlying HTML or Radix props. Full types are included with the package.

Behavior & accessibility

  • The source had zero-value charts. Non-zero data demonstrates a local SVG implementation.
  • The chart provides an accessible text summary; use DataTable for detailed data exploration.

Reference

Dashboard income and expense panels