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

CSS Variables

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

Examples

Explore different configurations and use cases for the BarChart component.

Product Sales - Custom Theme

Custom colors, axis labels, and value formatting

Custom theme with product sales data • Advanced tooltips

Large Dataset Performance

50 data points with smooth performance and animations

Large dataset with 50 data points • Smooth animations

Loading State

Error State

Chart Error

Network connection failed

Empty State

No Data

There's no data to display

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

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. No external dependencies on our library.