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.

Live Examples

Composable Charts

<Chart type="..." /> renders one series type from a dataKeys array. That shape cannot express a stacked bar, a bar and a line together, a second axis, or a reference line - no additional type string fixes it, because the limitation is that the chart is one prop rather than a tree.

The composable pieces sit alongside it. Chart is unchanged and stays supported.

Each series takes its colour from the container’s palette in the order it appears in the tree, so a chart is distinguishable without naming colours. Pass color on a series to override its slot, or colors on the container to replace the palette. Colours are keyed by dataKey, so adding a series does not recolour the ones already there.

Areas and reference lines

Which to use

Reach for Chart when one series type and a list of keys says it. Reach for the composable pieces when the chart has more than one shape in it, needs a second axis, or needs anything drawn on top.

Import

import { Chart } from "@jarllyng/nostromo";
// or
import { Chart } from "@jarllyng/nostromo/charts";

Usage

import { Chart } from "@jarllyng/nostromo";
 
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" />
  );
}

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 , 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