Charts

A suite of lightweight data visualization components for rendering bar charts, line charts, area charts, and donut charts. Built with pure CSS and SVG for zero-dependency rendering, with Framer Motion animations and full theme support.

Live Preview

Interactive chart demos rendered with pure CSS and SVG. No external charting libraries required.

Bar Chart

Line Chart

Donut Chart

Installation

Install the Aidash Components package using your preferred package manager.

$ pnpm add @aidash/components

Import

Import the chart components you need into your file.

tsx
import { BarChart, LineChart, DonutChart, AreaChart } from '@/components/aidash/charts';

Bar Chart

Vertical bar chart for comparing discrete categories. Supports animated entrance, custom colors, value labels, and responsive layout.

Bar Chart
tsx
<BarChart
data={[
  { label: 'Q1', value: 72 },
  { label: 'Q2', value: 58 },
  { label: 'Q3', value: 89 },
  { label: 'Q4', value: 95 },
]}
height={180}
color="brand"
showLabels
showValues
animated
/>
Tip
Use the gap prop to control spacing between bars. For horizontal bar charts, set orientation="horizontal".

Line Chart

SVG-based line chart for visualizing trends over time. Features smooth curves, data point dots, grid lines, and tooltip support.

tsx
1<LineChart2data={[3  { label: 'Jan', value: 20 },4  { label: 'Feb', value: 45 },5  { label: 'Mar', value: 35 },6  // ...more data points7]}8width={480}9height={180}10color="brand"11strokeWidth={2.5}12showDots13showGrid14/>

Donut Chart

Circular chart for displaying proportional data. Uses SVG stroke-dasharray for segments with center label support and smooth animations.

tsx
1<DonutChart2data={[3  { label: 'Organic', value: 52, color: '#10b981' },4  { label: 'Direct', value: 28, color: 'var(--color-brand-500)' },5  { label: 'Referral', value: 20, color: '#f59e0b' },6]}7size={140}8strokeWidth={20}9showLabel10animated11/>

Area Chart

A variant of the line chart with a filled area below the curve. Ideal for showing volume or cumulative data over time.

tsx
1<LineChart2data={monthlyData}3width={480}4height={180}5color="brand"6fill           // Enables area fill below the line7showDots8showGrid9/>
Tip
The area chart is simply a LineChart with the fill prop enabled. The gradient automatically adapts to the current theme colors.

Customization

Customize chart colors, dimensions, labels, and styling to match your design system.

Color Themes

Brand
Success
Warning
Error
tsx
1{/* Using theme colors */}2<BarChart data={data} color="brand" />3<BarChart data={data} color="success" />4<BarChart data={data} color="warning" />5<BarChart data={data} color="error" />6 7{/* Using custom hex colors */}8<BarChart data={data} color="#8b5cf6" />9<LineChart data={data} color="#ec4899" />

Dimensions & Labels

tsx
1{/* Control chart dimensions */}2<BarChart data={data} height={120} gap={4} />3<LineChart data={data} width={600} height={250} />4<DonutChart data={data} size={200} strokeWidth={32} />5 6{/* Toggle labels and values */}7<BarChart data={data} showLabels showValues />8<LineChart data={data} showDots={false} showGrid={false} />9<DonutChart data={data} showLabel={false} />

API Reference

Complete list of props for each chart component.

BarChart
PropTypeDefaultDescription
data{ label: string; value: number }[][]Array of data points to render as bars
heightnumber200Height of the chart in pixels
colorstring'brand'Color theme: brand, success, warning, error, or custom hex
showLabelsbooleantrueShow labels below each bar
showValuesbooleanfalseShow value text above each bar
animatedbooleantrueEnable entrance animation
gapnumber8Gap between bars in pixels
classNamestring''Additional CSS classes
LineChart / AreaChart
PropTypeDefaultDescription
data{ label: string; value: number }[][]Array of data points to plot
widthnumber400Width of the SVG viewport
heightnumber200Height of the SVG viewport
colorstring'brand'Stroke color theme
strokeWidthnumber2Width of the line stroke
showDotsbooleantrueShow data point dots
showGridbooleantrueShow background grid lines
fillbooleanfalseFill area below the line (area chart)
classNamestring''Additional CSS classes
DonutChart
PropTypeDefaultDescription
data{ label: string; value: number; color: string }[][]Segments with labels, values, and colors
sizenumber160Diameter of the donut in pixels
strokeWidthnumber24Thickness of the donut ring
showLabelbooleantrueShow center label (total or percentage)
animatedbooleantrueEnable entrance animation
classNamestring''Additional CSS classes

Accessibility

Built-in accessibility features ensure charts are usable by everyone.

ARIA Labels

All chart components accept aria-label and render with role="img" to describe the chart purpose to screen readers.

Data Table Fallback

Each chart includes a visually hidden <table> with the raw data, so screen readers can announce individual data points with labels and values.

Color Contrast

Default color palettes are selected to meet WCAG AA contrast ratios. The donut chart uses distinct hues to remain distinguishable for users with color vision deficiencies.

Motion Preferences

Entrance animations respect prefers-reduced-motion. When reduced motion is preferred, charts render instantly without animation.

tsx
1{/* Provide descriptive aria-label */}2<BarChart3data={salesData}4aria-label="Monthly sales for 2026, ranging from $45k to $95k"5/>6 7{/* Screen readers will announce the hidden data table */}8<DonutChart9data={deviceData}10aria-label="Device distribution: Desktop 45%, Mobile 30%, Tablet 15%, Other 10%"11/>12 13{/* Combine with live region for dynamic updates */}14<div aria-live="polite">15<LineChart data={realtimeData} aria-label="Real-time server metrics" />16</div>

Related

Other components that work well alongside Charts.

Table

Data tables for displaying raw chart data with sorting and pagination.

Progress

Linear and circular progress indicators for single-value metrics.

Card

Container component perfect for wrapping charts in dashboard layouts.