Charts

The Charts component provides flexible data visualization with support for line, bar, area, and pie charts. Built on Recharts with full accessibility and customization options.

Import

import { Chart } from '@nostromo/ui-core'
// or
import { Chart } from '@nostromo/ui-core/charts'

Usage

import { Chart } from '@nostromo/ui-core'
 
const data = [
  { name: 'Jan', sales: 4000 },
  { name: 'Feb', sales: 3000 },
  { name: 'Mar', sales: 2000 }
]
 
export default function Example() {
  return (
    <Chart
      type="line"
      data={data}
      dataKeys={['sales']}
      title="Monthly Sales"
    />
  )
}

Live Examples

Chart Types

Line Chart

Best for showing trends over time or continuous data.

<Chart
  type="line"
  data={data}
  dataKeys={['sales']}
  title="Sales Trend"
/>

Bar Chart

Best for comparing categories or discrete data points.

<Chart
  type="bar"
  data={data}
  dataKeys={['sales', 'revenue']}
  title="Sales Comparison"
/>

Area Chart

Best for showing cumulative values or stacked data over time.

<Chart
  type="area"
  data={data}
  dataKeys={['sales']}
  title="Sales Area"
/>

Pie Chart

Best for showing proportions or percentages of a whole.

<Chart
  type="pie"
  data={data}
  dataKeys={['value']}
  title="Distribution"
/>

Props

ChartDataPoint Interface

interface ChartDataPoint {
  name: string;
  [key: string]: string | number;
}

Examples

Multiple Data Series

<Chart
  type="line"
  data={monthlyData}
  dataKeys={['sales', 'revenue', 'profit']}
  title="Multiple Metrics"
/>

Custom Colors

<Chart
  type="bar"
  data={data}
  dataKeys={['sales', 'revenue']}
  colors={['#ef4444', '#10b981']}
  title="Custom Colors"
/>

Minimal Chart

<Chart
  type="line"
  data={data}
  dataKeys={['sales']}
  showGrid={false}
  showLegend={false}
  showTooltip={false}
  variant="minimal"
/>

Custom Size

<Chart
  type="line"
  data={data}
  dataKeys={['sales']}
  size="lg"
  title="Large Chart"
/>

With Description

<Chart
  type="line"
  data={data}
  dataKeys={['sales']}
  title="Monthly Sales"
  description="Sales data for the first quarter of 2025"
/>

Accessibility

• ✅ WCAG 2.1 AA compliant
• ✅ ARIA labels - Proper role="img" and aria-label attributes
• ✅ Screen reader support - Chart data is accessible
• ✅ Keyboard navigation - Tooltips accessible via keyboard
• ✅ Color contrast - Meets contrast requirements
• ✅ Descriptive text - Title and description support

Styling

Charts automatically use your theme's color palette:

• Brand colors for primary data series
• Semantic colors (success, warning, error, info) for additional series
• Neutral colors for axes and grid
• Dark mode support via CSS variables

Do's and Don'ts

✅ Do

• Use appropriate chart type for your data
• Provide meaningful titles and descriptions
• Use custom colors that match your brand
• Include aria-label for screen readers
• Use multiple data keys for comparisons

❌ Don't

• Use pie charts for more than 5-6 categories
• Use line charts for discrete categories
• Forget to provide titles for accessibility
• Use too many data series (max 3-4 recommended)
• Use colors that don't meet contrast requirements

Related Components

• Table - For tabular data display
• DataTable - For advanced data tables with filtering

Technical Details

Charts component is built on Recharts (opens in a new tab), a composable charting library built on React and D3. The component provides a simplified API while maintaining full customization options.

Dependencies:

• recharts - Chart rendering library

Bundle Impact:

• Charts add ~150KB to bundle size (gzipped)
• Tree-shakeable - only import what you use
• Consider lazy loading for charts-heavy pages