Bar Chart

A production-ready, highly customizable bar chart component with zero configuration required. Perfect TypeScript support, advanced animations, and one-command installation.

CLI Installation

Filled & Outline Variants

Vertical & Horizontal

Performance Optimized

Responsive

TypeScript

Zero Dependencies

Basic Example

A simple bar chart showing monthly revenue data with click interactions

Selected: Click a bar to select

Animations

Variant:

Orientation:

Installation

Get started with the BarChart component in just a few steps.

Quick Install

bash

npx mario-charts@latest add bar-chart

Zero Lock-in Philosophy

The component is fully yours to own, modify, and customize.

Examples

Explore different configurations and use cases for the BarChart component.

Product Sales - Custom Theme

Custom colors, axis labels, and value formatting with advanced tooltips

Animations

Variant:

Orientation:

Large Dataset Performance

50 data points with smooth performance and animations

Animations

Variant:

Orientation:

Loading State

Error State

Chart Error

Network connection failed

Empty State

No Data

There's no data to display

New Features

Explore the latest additions: outline variants and horizontal orientation support.

Filled Variant

Traditional filled bars with solid colors

Outline Variant

Modern outline-only bars for minimalist designs

Vertical Orientation

Standard vertical bars growing from bottom to top

Horizontal Orientation

Horizontal bars growing from left to right

Advanced Combination

Horizontal orientation with outline variant - perfect for modern dashboards

Horizontal + Outline • Enhanced loading states • Responsive tooltips

API Reference

Complete TypeScript interface with all available props and configurations.

Prop	Type	Default	Description
`data`required	readonly T[]	—	Array of data objects to display in the chart
`x`required	keyof T	—	Key from data object to use for x-axis labels
`y`	keyof T	'value'	Key from data object to use for y-axis values
`colors`	readonly string[]	DEFAULT_COLORS	Array of colors to use for bars
`variant`	'filled' \| 'outline'	'filled'	Visual style of bars - filled with color or outline only
`orientation`	'vertical' \| 'horizontal'	'vertical'	Direction of bar growth - vertical (bottom-up) or horizontal (left-right)
`height`	number	300	Height of the chart in pixels
`loading`	boolean	false	Show loading state
`error`	string \| null	null	Error message to display
`animation`	boolean	true	Enable entrance animations
`onBarClick`	(data: T, index: number) => void	—	Callback fired when a bar is clicked
`className`	string	—	Additional CSS classes to apply to the container