import type { Meta, StoryObj } from "@storybook/react";
import { LineChartProps } from "../LineChart";
declare const lineChartV2Data: {
    month: string;
    desktop: number;
    mobile: number;
    tablet: number;
}[];
/**
 * # ScrollableLineChart Component Documentation
 *
 * The LineChart component is a powerful and flexible tool for visualizing trends over time or comparing continuous data.
 * It's ideal for:
 *
 * - **Time-Series Analysis**: Tracking metrics over days, months, or years.
 * - **Comparative Analysis**: Comparing the performance of multiple data series.
 * - **Trend Identification**: Spotting upward or downward trends, and patterns in datasets.
 *
 * ## Key Features
 *
 * ### Advanced Label Handling
 * - **Collision Detection**: Automatically detects and prevents overlapping X-axis labels.
 * - **Intelligent Truncation**: Truncates long labels with an ellipsis (...) to keep the chart clean.
 * - **Horizontal Offset**: Ensures truncated labels remain horizontally centered for readability.
 *
 * ### Interactive & Responsive
 * - **Interactive Legend**: Allows toggling data series visibility and adapts with a "Show More" feature for many items.
 * - **Hover Tooltips**: Provides detailed data points on hover for enhanced user interaction.
 * - **Responsive Design**: Fluidly adjusts to any container size, from small widgets to large dashboards.
 *
 * ### Customization
 * - **Theming**: Six pre-built color palettes to fit your application's design, or use custom colors with `customPalette`.
 * - **Line Styles**: Supports `linear`, `natural` (smooth), and `step` variants.
 * - **Styling Options**: Control stroke width, grid visibility, and more.
 */
declare const meta: Meta<LineChartProps<typeof lineChartV2Data>>;
export default meta;
type Story = StoryObj<typeof meta>;
/**
 * ## Comprehensive Data Explorer
 *
 * This story serves as a comprehensive test suite for the LineChart component.
 * Use the buttons to switch between various datasets designed to test edge cases in:
 *
 * - **Label Collision**: Datasets with long, dense, or overlapping labels.
 * - **Data Density**: Scenarios with few or many data points.
 * - **Legend Overflow**: A dataset with many series to test legend expand/collapse functionality.
 *
 * It's an excellent tool for developers to see how the chart behaves under different conditions.
 */
export declare const DataExplorer: Story;
/**
 * ## Big Labels
 *
 * This story demonstrates the chart's ability to handle very long category labels.
 * The chart's intelligent truncation and collision detection should be visible here.
 * X-axis labels that are too long to fit will be gracefully truncated with an ellipsis.
 */
export declare const BigLabelsStory: Story;
/**
 * ## Dense Timeline
 *
 * Tests how the chart handles many data points with medium-length period labels.
 * The chart should enable horizontal scrolling and apply intelligent label truncation.
 * This scenario is common in financial or analytical dashboards where many time periods are displayed.
 */
export declare const DenseTimelineStory: Story;
/**
 * ## Stroke and Style Customization
 *
 * This story showcases how to customize the appearance of the lines.
 * You can adjust properties like `strokeWidth` to create different visual effects.
 */
export declare const StrokeCustomizationStory: Story;
/**
 * ## Line Variants
 *
 * Compares the three available line variants:
 * - **Linear**: Straight lines connecting data points.
 * - **Natural**: Smooth curves for a softer, organic look.
 * - **Step**: Stepped lines, useful for showing discrete changes.
 */
export declare const VariantComparisonStory: Story;
/**
 * ## Custom Palette
 *
 * This story demonstrates how to use the customPalette prop to provide your own color scheme
 * for the chart. This is useful when you need to match your brand colors or create
 * specific visual themes.
 */
export declare const CustomPaletteStory: Story;
/**
 * ## Legend Expand/Collapse
 *
 * Tests the legend's expand/collapse functionality with a large number of data series.
 * The legend should automatically show a "Show More" button when items overflow,
 * allowing users to toggle between a collapsed and expanded view.
 */
export declare const ExpandCollapseMarketingStory: Story;
/**
 * ## Responsive Behavior Demo
 *
 * This story demonstrates the responsive capabilities of the LineChart. Drag the handles
 * on the container to resize it and observe how the chart adapts.
 *
 * **Responsive Features:**
 * - **Label Truncation**: More aggressive truncation on smaller container widths.
 * - **Layout Adaptation**: Chart elements adjust to fit the available space.
 * - **Legend Behavior**: The legend may wrap or show expand/collapse buttons as needed.
 */
export declare const ResponsiveBehaviorDemo: Story;
//# sourceMappingURL=lineChart.stories.d.ts.map