Command Palette

Search for a command to run...

Components / Display

Data Visualization

தரவு காட்சிப்படுத்தல்

Responsive, lightweight, and highly accessible SVG-based charts. Built natively using Tailwind CSS and React without third-party visualization libraries, preventing Next.js hydration issues.

மெதுவான ஏற்றுதல் அல்லது அடுத்த கட்டமைப்பு நீர்மயமாக்கல் (SSR Hydration) பிழைகள் இன்றி, சுலபமாகச் செயல்படும் எளிய வடிவிலான SVG வரைபடங்கள்.

Bar Chart

Bar charts represent categorical data with rectangular bars, useful for comparing discrete quantities or frequency tables.

Component preview
Bar Chart previewநெடுவரிசை வரைபடம்

Line Chart

Line charts display information as a series of data points connected by straight line segments, demonstrating continuous trends over time.

Component preview
Line Chart previewகோட்டு வரைபடம்

Donut Chart

Donut charts divide data into slices to illustrate numerical proportions, featuring a hollow center for total counts and interactive legends.

Component preview
Donut Chart previewவட்ட வரைபடம்

Anatomy

Structure

Anatomy

5 parts documented for implementation and review.

Component map
1

SVG Container

SVG கொள்கலன்required<svg>

Root SVG element with responsive viewBox. Uses role='img' and aria-label to describe the chart content for screen readers. Width is 100% of parent; height is determined by the height prop.

2

Grid Lines & Axis

கட்ட கோடுகள்required

Dashed horizontal grid lines with Y-axis value labels (font-mono, 10px). Provides visual scale reference. X-axis labels sit below the data area.

3

Data Elements

தரவு உறுப்புகள்required

Bars (BarChart), line path + area fill (LineChart), or arc segments (DonutChart). Use brand color token by default; DonutChart supports custom per-segment colors.

4

Tooltip

மேலோவிய குறிப்பு

Appears on hover over a data point. Shows the exact value in a rounded pill overlay using popover design tokens for consistent theming.

5

Legend (Donut only)

விளக்கம்

Interactive legend list beside the donut. Hovering a legend item highlights the corresponding slice and updates the center label.

Props

API

Props

3 props
datareq
Type
ChartData[]
Default
-
Description
Array of items with label, value, and optional color. Returns null if empty.
height
Type
number
Default
240
Description
Height of the rendered SVG canvas.
className
Type
string
Default
-
Description
Additional CSS classes.

Accessibility

  • Screen Reader Accessible: All SVG elements use role="img" with descriptive aria-label so screen readers can announce the chart type and data point count.
  • Zero SSR Mismatch: Built natively using React-rendering SVG tags, meaning server-side render matches client-side markup identically. Avoids standard hydrate layout mismatches common in Canvas/D3 libraries.
  • Responsive Dimensions: Charts use relative viewBox limits instead of static widths, adapting automatically to viewport resizing.
  • Empty Data Handling: Charts gracefully return null when provided with empty data arrays, preventing runtime crashes.
  • Unique Gradient IDs: LineChart uses React.useId() to generate unique gradient IDs, preventing visual bugs when multiple charts render on the same page.

Best practices

Use distinct, themed colors for chart slices
வரைபடப் பிரிவுகளுக்குத் தகுந்த நிறங்களைப் பயன்படுத்தவும்

Rely on standard system colors (primary, info, warning, success) to keep the charts aligned with the rest of the app's visual guidelines.

ஒழுங்கமைக்கப்பட்ட பிராண்ட் மற்றும் தீம் நிறங்களைப் பயன்படுத்துங்கள்.

Don't crowd lines and bar groups with too many points
வரைபடத்தில் அளவுக்கு அதிகமான தரவுகளைக் குவிக்காதே

Too many data points cram the text labels and make the chart unreadable on mobile screens. Chunk or split datasets instead.

அதிகமான தரவுகள் திரையை நெரிசலாக்கி வாசிப்பதைக் கடினமாக்கும்.

Include legends for multi-series or multi-segment charts
பல பிரிவுகள் உள்ள வரைபடங்களுக்கு விளக்கங்களைச் சேர்க்கவும்

Donut charts and multi-series line charts must include a legend so users can identify each segment without relying on color alone.

வட்ட வரைபடங்களில் ஒவ்வொரு பகுதியையும் அடையாளம் காண விளக்கக் குறிப்பு இருக்க வேண்டும்.

Don't rely solely on color to distinguish categories
வகைகளை வேறுபடுத்த நிறத்தை மட்டும் நம்பாதே

Approximately 8% of men have color vision deficiency. Use patterns, labels, or shape variations in addition to color differences.

சுமார் 8% ஆண்களுக்கு நிற பார்வைக் குறைபாடு உள்ளது. நிற வேறுபாடுகளுடன் வடிவங்கள், உரைகள் அல்லது வடிவ மாறுபாடுகளையும் சேர்க்கவும்.