@buun_group/brutalist-ui
Version:
A brutalist-styled component library
67 lines (66 loc) • 2.06 kB
TypeScript
/**
* @module BarChart
* @description A data visualization component for displaying bar charts with interactive tooltips, animations, and customizable styling. Ideal for comparing values across categories.
*/
import React, { CSSProperties } from 'react';
/**
* Data point structure for the bar chart
*/
interface BarChartDataPoint {
/** Label for the data point (typically X-axis category) */
label: string;
/** Numeric value for the bar height */
value: number;
/** Optional custom color for this specific bar */
color?: string;
}
/**
* Props for the BarChart component
*/
interface BarChartProps {
/** Array of data points to display as bars */
data: BarChartDataPoint[];
/** Optional title displayed above the chart */
title?: string;
/** Optional subtitle displayed below the title */
subtitle?: string;
/** Height of the chart area in pixels
* @default 300
*/
height?: number;
/** Whether to show value labels on top of bars
* @default true
*/
showValues?: boolean;
/** Whether to show horizontal grid lines
* @default true
*/
showGrid?: boolean;
/** Whether to animate bars on mount
* @default true
*/
animated?: boolean;
/** Size variant affecting spacing and text sizes
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
/** Visual style variant
* @default 'default'
*/
variant?: 'default' | 'minimal' | 'brutal';
/** Whether to show a container border
* @default false
*/
showContainer?: boolean;
/** Border style when showContainer is true
* @default 'solid'
*/
borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double';
/** Additional CSS class names */
className?: string;
/** Additional inline styles (supports utility classes) */
style?: CSSProperties;
}
declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
export { BarChart };
export type { BarChartProps, BarChartDataPoint };