@buun_group/brutalist-ui/dist/react/line-chart/LineChart.d.ts

A brutalist-styled component library

/**
 * @module LineChart
 * @description A line chart component for visualizing data trends over time. Features smooth curves, animated rendering, tooltips, and customizable styling with brutalist aesthetics.
 */
import React, { CSSProperties } from 'react';
/**
 * Structure for line chart data points
 */
interface LineChartDataPoint {
    /**
     * Label for the data point (e.g., date, category)
     */
    label: string;
    /**
     * Numeric value for the data point
     */
    value: number;
    /**
     * Optional custom color for this specific point
     */
    color?: string;
}
/**
 * Props for the LineChart component
 */
interface LineChartProps {
    /**
     * Array of data points to display
     */
    data: LineChartDataPoint[];
    /**
     * Chart title
     */
    title?: string;
    /**
     * Chart subtitle
     */
    subtitle?: string;
    /**
     * Height of the chart in pixels
     * @default 300
     */
    height?: number;
    /**
     * Whether to show value labels on data points
     * @default true
     */
    showValues?: boolean;
    /**
     * Whether to show grid lines
     * @default true
     */
    showGrid?: boolean;
    /**
     * Whether to animate the chart on render
     * @default true
     */
    animated?: boolean;
    /**
     * Size variant of the chart
     * @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';
    /**
     * Color of the line
     * @default 'var(--brutal-accent)'
     */
    lineColor?: string;
    /**
     * Width of the line
     * @default 3
     */
    lineWidth?: number;
    /**
     * Whether to show dots at data points
     * @default true
     */
    showDots?: boolean;
    /**
     * Whether to use smooth curves instead of straight lines
     * @default false
     */
    smooth?: boolean;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
/**
 * A line chart component for visualizing data trends.
 * Supports smooth curves, animations, and interactive tooltips.
 *
 * @example
 * ```tsx
 * <LineChart
 *   data={[
 *     { label: 'Jan', value: 100 },
 *     { label: 'Feb', value: 150 },
 *     { label: 'Mar', value: 120 }
 *   ]}
 *   title="Monthly Sales"
 *   smooth
 *   animated
 * />
 * ```
 */
declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<HTMLDivElement>>;
export { LineChart };
export type { LineChartProps, LineChartDataPoint };