Line Chart

A customizable line chart component with animations, interactions, and gradient fills.

Installation


pnpm dlx bna-ui add line-chart

Usage

import { LineChart } from '@/components/charts/line-chart';

const data = [
  { x: 'Jan', y: 100, label: 'January' },
  { x: 'Feb', y: 120, label: 'February' },
  { x: 'Mar', y: 90, label: 'March' },
  { x: 'Apr', y: 140, label: 'April' },
];
 
<LineChart
  data={data}
  config={{
    height: 200,
    showGrid: true,
    showLabels: true,
    animated: true,
  }}
/>;

Examples

Basic Line Chart

Interactive Line Chart

Styled Line Chart

Minimal Line Chart

API Reference

LineChart

A customizable line chart component with smooth animations and interactive features.

Prop	Type	Default	Description
`data`	`ChartDataPoint[]`	-	Array of data points to display on the chart.
`config`	`ChartConfig`	`{}`	Configuration object for chart appearance.
`style`	`ViewStyle`	-	Additional styles to apply to the chart.

ChartDataPoint

Property	Type	Default	Description
`x`	`string \| number`	-	The x-axis value for the data point.
`y`	`number`	-	The y-axis value for the data point.
`label`	`string`	-	Optional label for the data point.

ChartConfig

Property	Type	Default	Description
`width`	`number`	-	Fixed width of the chart (auto-sizes if omitted).
`height`	`number`	`200`	Height of the chart.
`padding`	`number`	`20`	Padding around the chart.
`showGrid`	`boolean`	`true`	Whether to show grid lines.
`showLabels`	`boolean`	`true`	Whether to show x-axis labels.
`animated`	`boolean`	`true`	Whether to animate the chart on load.
`duration`	`number`	`1000`	Animation duration in milliseconds.
`gradient`	`boolean`	`false`	Whether to show gradient fill under the line.
`interactive`	`boolean`	`false`	Whether to enable touch interactions.
`showYLabels`	`boolean`	`true`	Whether to show y-axis labels.
`yLabelCount`	`number`	`5`	Number of y-axis labels to display.
`yAxisWidth`	`number`	`20`	Width allocated for y-axis labels.

Features

Smooth Animations: Built-in animations using React Native Reanimated
Interactive Touch: Optional touch gestures for data exploration
Responsive Design: Automatically adapts to container width
Customizable Grid: Optional grid lines for better readability
Gradient Fill: Optional gradient fill under the line
Curved Lines: Smooth bezier curves between data points
Smart Formatting: Automatic number formatting (K, M suffixes)
Theme Integration: Uses theme colors for consistent styling

Accessibility

The LineChart component is built with accessibility in mind:

Semantic SVG structure for screen readers
Proper contrast ratios for visual elements
Touch targets meet minimum size requirements
Supports dynamic text sizing
Keyboard navigation support (when interactive)

Performance

The component is optimized for performance:

Uses React Native Reanimated for smooth 60fps animations
Efficient SVG rendering with minimal re-renders
Gesture handling optimized for touch interactions
Automatic cleanup of animation values

Heatmap Chart Pie Chart

On This Page

Installation Usage Examples Basic Line Chart Interactive Line Chart Styled Line Chart Minimal Line Chart API Reference LineChart ChartDataPoint ChartConfig Features Accessibility Performance