BNA

BNA UI
170

Column Chart

PreviousNext

A customizable horizontal bar chart component with smooth animations and flexible styling.

Installation

pnpm dlx bna-ui add column-chart

Usage

import { ColumnChart } from '@/components/charts/column-chart';
const data = [
  { label: 'Sales', value: 120 },
  { label: 'Marketing', value: 98 },
  { label: 'Support', value: 86 },
  { label: 'Development', value: 140 },
];
 
<ColumnChart
  data={data}
  config={{
    height: 200,
    showLabels: true,
    animated: true,
  }}
/>;

Examples

Basic Column Chart

Sample Column Chart

Styled Column Chart

Large Column Chart

API Reference

ColumnChart

A customizable horizontal bar chart component with smooth animations and flexible styling. Perfect for displaying categorical data with emphasis on comparison between categories.

PropTypeDefaultDescription
dataChartDataPoint[]-Array of data points to display on the chart.
configChartConfig{}Configuration object for chart appearance.
styleViewStyle-Additional styles to apply to the chart.

ChartDataPoint

PropertyTypeDefaultDescription
labelstring-The label for the data point.
valuenumber-The value for the data point.
colorstring-Optional custom color for the bar.

ChartConfig

PropertyTypeDefaultDescription
widthnumber-Fixed width of the chart (auto-sizes if omitted).
heightnumber200Height of the chart.
paddingnumber20Padding around the chart.
showLabelsbooleantrueWhether to show labels for bars.
animatedbooleantrueWhether to animate the chart on load.
durationnumber800Animation duration in milliseconds.

Features

  • Horizontal Layout: Displays bars horizontally for better label readability
  • Smooth Animations: Built-in animations using React Native Reanimated
  • Responsive Design: Automatically adapts to container width
  • Custom Colors: Support for individual bar colors
  • Label Display: Shows both category labels and values
  • Theme Integration: Uses theme colors for consistent styling
  • Rounded Corners: Aesthetic rounded bar corners

Use Cases

Column charts are particularly effective for:

  • Category Comparison: Comparing values across different categories
  • Performance Metrics: Displaying KPIs, scores, or ratings
  • Survey Results: Showing response distributions
  • Budget Allocation: Visualizing spending across departments
  • Progress Tracking: Displaying completion rates or achievements

Design Considerations

The horizontal layout of the ColumnChart makes it ideal for:

  • Long Category Names: Labels are displayed to the left of bars, allowing for longer text
  • Small Screens: Horizontal bars work better on mobile devices
  • Multiple Categories: Easier to scan through many categories vertically
  • Value Comparison: Horizontal alignment makes it easier to compare bar lengths

Accessibility

The ColumnChart component includes several accessibility features:

  • Semantic SVG structure for screen readers
  • Proper contrast ratios for visual elements
  • Text labels for both categories and values
  • Supports dynamic text sizing
  • Keyboard navigation support

Performance

The component is optimized for performance:

  • Uses React Native Reanimated for smooth 60fps animations
  • Efficient SVG rendering with minimal re-renders
  • Automatic cleanup of animation values
  • Responsive layout calculations

Styling

The component integrates with your theme system:

  • Uses primary color from theme for default bar color
  • Uses mutedForeground color for labels and text
  • Supports custom colors per data point
  • Rounded corners with consistent border radius

Animation

The chart features smooth entry animations:

  • Bars animate from 0 width to full width
  • Configurable animation duration
  • Can be disabled for instant rendering
  • Uses React Native Reanimated for optimal performance
Chart ContainerDoughnut Chart