@sproutsocial/seeds-react-data-viz 0.3.0 → 0.4.0

package/dist/index.d.mts

@@ -1,12 +1,16 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { TimeTicksInfoObject, AxisLabelsFormatterContextObject, Chart, Annotation, TooltipFormatterContextObject, Options, SeriesSplineOptions, SeriesAreasplineOptions, AxisTickPositionsArray } from 'highcharts';
+import { TimeTicksInfoObject, AxisLabelsFormatterContextObject, Chart, Annotation, TooltipFormatterContextObject, Options, SeriesSplineOptions, SeriesAreasplineOptions, SeriesColumnOptions, AxisTickPositionsArray } from 'highcharts';
 import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 import { Table } from '@sproutsocial/seeds-react-table';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as styled_components from 'styled-components';
 
+/**
+ * Type of series to render. See {@link https://api.highcharts.com/highcharts/series} for detailed series configuration options.
+ */
+type TypeSeriesType = "areaspline" | "spline" | "column";
 interface ExtendedTimeTicksInfoObject extends TimeTicksInfoObject {
     unitName: "hour" | "day" | "week" | "month" | "year";
 }
@@ -14,7 +18,7 @@ interface ExtendedAxisLabelsFormatterContextObject extends AxisLabelsFormatterCo
     tickPositionInfo: ExtendedTimeTicksInfoObject;
 }
 type TypeChartDataPoint = Readonly<{
-    x: number;
+    x: number | string;
     y: number | null;
 }>;
 type TypeChartDataStyles = Readonly<{
@@ -22,8 +26,8 @@ type TypeChartDataStyles = Readonly<{
 }>;
 type TypeChartNumberFormat = "decimal" | "percent" | "currency" | "duration";
 type TypeChartTimeFormat = "12" | "24";
-type TypeChartTooltipDateFormatter = ({ x }: {
-    x: number;
+type TypeChartTooltipDateFormatter = ({ x, }: {
+    x: number | string;
 }) => ReactNode;
 type TypeChartTooltipProps = Readonly<{
     data: ReadonlyArray<Readonly<{
@@ -32,7 +36,7 @@ type TypeChartTooltipProps = Readonly<{
         value: number | null;
         icon?: ReactNode;
     }>>;
-    x: number;
+    x: number | string;
 }>;
 type TypeChartYAxisLabelFormatter = ({ y, yValues, }: Readonly<{
     y: number;
@@ -48,6 +52,48 @@ type TypeChartXAnnotations = Readonly<{
 type TypeChartStyleColor = string;
 type TypeChartStylePattern = "solid" | "dashed";
 type TypeChartStyleHasOnClick = boolean;
+type TypeVerticalBarChartProps = Readonly<{
+    data: ReadonlyArray<Readonly<{
+        name: string;
+        points: ReadonlyArray<TypeChartDataPoint>;
+        icon?: ReactNode;
+        styles?: TypeChartDataStyles & Readonly<{
+            pattern?: TypeChartStylePattern;
+        }>;
+    }>>;
+    invalidNumberLabel: ReactNode;
+    numberLocale: Intl.LocalesArgument;
+    textLocale: Intl.LocalesArgument;
+    tooltipDateFormatter: TypeChartTooltipDateFormatter;
+    currency?: string;
+    numberFormat?: TypeChartNumberFormat;
+    /**
+     * The maximum number of series to display.
+     * @default 10
+     * @description We recommend limiting the number of series to 10 to maintain chart readability and accessibility.
+     */
+    seriesLimit?: number;
+    /**
+     * If false, disables the warning when the number of series exceeds the seriesLimit.
+     * @default true
+     */
+    showSeriesLimitWarning?: boolean;
+    tooltip?: ({ data, x }: TypeChartTooltipProps) => ReactNode;
+    yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
+    onClick?: ({ x }: Readonly<{
+        x: number;
+    }>) => void;
+    tooltipClickLabel?: ReactNode;
+    timeFormat?: TypeChartTimeFormat;
+    xAnnotations?: TypeChartXAnnotations;
+    xAxisLabelFormatter?: (params: {
+        textLocale: Intl.LocalesArgument;
+        tickPositions: number[];
+        unitName: string;
+        value: string | number;
+        timeFormat?: string;
+    }) => string;
+}>;
 interface TypeExtendedChart extends Chart {
     annotations?: Annotation[];
 }
@@ -65,6 +111,7 @@ type TypeAreaChartProps = Readonly<{
     tooltipDateFormatter: TypeChartTooltipDateFormatter;
     tooltipTotalLabel: ReactNode;
     currency?: string;
+    disableTooltips?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ data, total, x, }: TypeChartTooltipProps & Readonly<{
         total: number | null;
@@ -90,6 +137,7 @@ declare const AreaChart: react.NamedExoticComponent<Readonly<{
     tooltipDateFormatter: TypeChartTooltipDateFormatter;
     tooltipTotalLabel: ReactNode;
     currency?: string;
+    disableTooltips?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ data, total, x, }: TypeChartTooltipProps & Readonly<{
         total: number | null;
@@ -231,6 +279,7 @@ type TypeDonutChartProps = Readonly<{
     numberLocale: Intl.LocalesArgument;
     textLocale: Intl.LocalesArgument;
     currency?: string;
+    disableTooltips?: boolean;
     hideLegend?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ color, name, percent, value, }: TypeDonutChartTooltipProps) => ReactNode;
@@ -245,6 +294,7 @@ declare const DonutChart: react.NamedExoticComponent<Readonly<{
     numberLocale: Intl.LocalesArgument;
     textLocale: Intl.LocalesArgument;
     currency?: string;
+    disableTooltips?: boolean;
     hideLegend?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ color, name, percent, value, }: TypeDonutChartTooltipProps) => ReactNode;
@@ -281,6 +331,7 @@ type TypeLineChartProps = Readonly<{
     textLocale: Intl.LocalesArgument;
     tooltipDateFormatter: TypeChartTooltipDateFormatter;
     currency?: string;
+    disableTooltips?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ data, x }: TypeChartTooltipProps) => ReactNode;
     yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
@@ -305,6 +356,7 @@ declare const LineChart: react.NamedExoticComponent<Readonly<{
     textLocale: Intl.LocalesArgument;
     tooltipDateFormatter: TypeChartTooltipDateFormatter;
     currency?: string;
+    disableTooltips?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ data, x }: TypeChartTooltipProps) => ReactNode;
     yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
@@ -318,17 +370,25 @@ declare const LineChart: react.NamedExoticComponent<Readonly<{
 
 declare const baseChartOptions: Options;
 declare const TIME_SERIES_CHART_HEIGHT = 275;
+declare const timeSeriesChartOptions: Options;
 declare const lineChartOptions: Options;
 declare const areaChartOptions: Options;
+declare const columnChartOptions: Options;
+/**
+ * The default series limit for VerticalBarChart.
+ * This limit is recommended to maintain chart readability and accessibility.
+ * @see {VerticalBarChart}
+ */
+declare const VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = 10;
 declare const DONUT_CHART_HALO_SIZE = 10;
 declare const DONUT_CHART_HEIGHT: number;
 declare const DONUT_CHART_WIDTH: number;
 declare const donutChartOptions: Options;
 
-type TypeTimeSeriesOptions = SeriesSplineOptions | SeriesAreasplineOptions;
-declare const transformDataToSeries: ({ data }: {
-    data: TypeAreaChartProps["data"] | TypeLineChartProps["data"];
-}, type: "spline" | "areaspline") => TypeTimeSeriesOptions[];
+type TypeTimeSeriesOptions = SeriesSplineOptions | SeriesAreasplineOptions | SeriesColumnOptions;
+declare const transformDataToSeries: ({ data, }: {
+    data: TypeAreaChartProps["data"] | TypeLineChartProps["data"] | TypeVerticalBarChartProps["data"];
+}, type: TypeSeriesType) => TypeTimeSeriesOptions[];
 
 type TypeTransformTimeSeriesTooltipDataProps = Readonly<{
     context: TooltipFormatterContextObject;
@@ -337,15 +397,6 @@ type TypeTransformTimeSeriesTooltipDataProps = Readonly<{
 type TypeTransformTimeSeriesTooltipDataReturn = TypeChartTooltipProps["data"];
 declare const transformTimeSeriesTooltipData: ({ context, data, }: TypeTransformTimeSeriesTooltipDataProps) => TypeTransformTimeSeriesTooltipDataReturn;
 
-type TypeXAxisLabelFormatterProps = Readonly<{
-    textLocale: Intl.LocalesArgument;
-    tickPositions: AxisTickPositionsArray;
-    unitName: ExtendedTimeTicksInfoObject["unitName"];
-    value: AxisLabelsFormatterContextObject["value"];
-    timeFormat?: TypeChartTimeFormat;
-}>;
-declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, timeFormat, }: TypeXAxisLabelFormatterProps) => string;
-
 type TypeYAxisLabelFormatterProps = Readonly<{
     numberLocale: Intl.LocalesArgument;
     textLocale: Intl.LocalesArgument;
@@ -356,6 +407,79 @@ type TypeYAxisLabelFormatterProps = Readonly<{
 }>;
 declare const yAxisLabelFormatter: ({ numberLocale, textLocale, tickPositions, value, currency, numberFormat, }: TypeYAxisLabelFormatterProps) => string;
 
+type TypeXAxisLabelFormatterProps = Readonly<{
+    textLocale: Intl.LocalesArgument;
+    tickPositions: AxisTickPositionsArray;
+    unitName: ExtendedTimeTicksInfoObject["unitName"];
+    value: AxisLabelsFormatterContextObject["value"];
+    timeFormat?: TypeChartTimeFormat;
+}>;
+declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, timeFormat, }: TypeXAxisLabelFormatterProps) => string;
+
+/**
+ * Helper to detect if data is hourly time data (all x values are hours of the same day)
+ * @param data - Array of series data with points containing x values
+ * @returns boolean indicating if all x values are hours of the same day
+ */
+declare function isHourlyTimeData(data: ReadonlyArray<Readonly<{
+    points: ReadonlyArray<{
+        x: number | string;
+    }>;
+}>>): boolean;
+
+/**
+ * Helper to detect if data is categorical hour data (all x values are hour strings)
+ * Supports both 12-hour format ("12 AM", "1 PM") and 24-hour format ("00:00", "13:00", "23:00")
+ * @param data - Array of series data with points containing x values
+ * @returns boolean indicating if all x values are hour strings
+ */
+declare function isCategoricalHourData(data: ReadonlyArray<Readonly<{
+    points: ReadonlyArray<{
+        x: number | string;
+    }>;
+}>>): boolean;
+
+declare const getStorybookCategoricalData: ({ showNulls, showNegativeValues, numberOfSeries, yAxisMax, showCustomColors, showDashedLines, categoryType, }: {
+    showNulls: boolean;
+    showNegativeValues: boolean;
+    numberOfSeries: number;
+    yAxisMax: number;
+    showCustomColors: boolean;
+    showDashedLines: boolean;
+    categoryType: "hours" | "hours24" | "days" | "months" | "custom";
+}) => {
+    points: {
+        x: string;
+        y: number | null;
+    }[];
+    name: string;
+    styles: {
+        color: string | undefined;
+        pattern: string;
+    };
+}[];
+
+declare const getStorybookSparseTimelineData: ({ showNulls, showNegativeValues, numberOfSeries, yAxisMax, showCustomColors, showDashedLines, numberOfPoints, timeSpanHours, }: {
+    showNulls: boolean;
+    showNegativeValues: boolean;
+    numberOfSeries: number;
+    yAxisMax: number;
+    showCustomColors: boolean;
+    showDashedLines: boolean;
+    numberOfPoints?: number;
+    timeSpanHours?: number;
+}) => {
+    points: {
+        x: number;
+        y: number | null;
+    }[];
+    name: string;
+    styles: {
+        color: string | undefined;
+        pattern: string;
+    };
+}[];
+
 declare const GlobalChartStyleOverrides: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
 declare const baseChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
     $colors: ReadonlyArray<TypeChartStyleColor>;
@@ -377,4 +501,4 @@ declare const donutChartStyles: styled_components.FlattenInterpolation<styled_co
     $colors: ReadonlyArray<TypeChartStyleColor>;
 }>, any>>;
 
-export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipPortal, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, GlobalChartStyleOverrides, LineChart, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeAreaChartProps, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartLegendLabelProps, type TypeChartLegendProps, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTimeFormat, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartTooltipTableProps, type TypeChartXAnnotations, type TypeChartXAnnotationsDetails, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeExtendedChart, type TypeLegendLabel, type TypeLineChartProps, areaChartOptions, areaChartStyles, baseChartOptions, baseChartStyles, donutChartOptions, donutChartStyles, generateChartTooltipPortalId, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, lineChartStyles, timeSeriesChartStyles, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
+export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipPortal, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, GlobalChartStyleOverrides, LineChart, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeAreaChartProps, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartLegendLabelProps, type TypeChartLegendProps, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTimeFormat, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartTooltipTableProps, type TypeChartXAnnotations, type TypeChartXAnnotationsDetails, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeExtendedChart, type TypeLegendLabel, type TypeLineChartProps, type TypeSeriesType, type TypeVerticalBarChartProps, VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT, areaChartOptions, areaChartStyles, baseChartOptions, baseChartStyles, columnChartOptions, donutChartOptions, donutChartStyles, generateChartTooltipPortalId, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, getStorybookCategoricalData, getStorybookSparseTimelineData, isCategoricalHourData, isHourlyTimeData, lineChartOptions, lineChartStyles, timeSeriesChartOptions, timeSeriesChartStyles, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };

package/dist/index.d.ts

@@ -1,12 +1,16 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { TimeTicksInfoObject, AxisLabelsFormatterContextObject, Chart, Annotation, TooltipFormatterContextObject, Options, SeriesSplineOptions, SeriesAreasplineOptions, AxisTickPositionsArray } from 'highcharts';
+import { TimeTicksInfoObject, AxisLabelsFormatterContextObject, Chart, Annotation, TooltipFormatterContextObject, Options, SeriesSplineOptions, SeriesAreasplineOptions, SeriesColumnOptions, AxisTickPositionsArray } from 'highcharts';
 import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 import { Table } from '@sproutsocial/seeds-react-table';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as styled_components from 'styled-components';
 
+/**
+ * Type of series to render. See {@link https://api.highcharts.com/highcharts/series} for detailed series configuration options.
+ */
+type TypeSeriesType = "areaspline" | "spline" | "column";
 interface ExtendedTimeTicksInfoObject extends TimeTicksInfoObject {
     unitName: "hour" | "day" | "week" | "month" | "year";
 }
@@ -14,7 +18,7 @@ interface ExtendedAxisLabelsFormatterContextObject extends AxisLabelsFormatterCo
     tickPositionInfo: ExtendedTimeTicksInfoObject;
 }
 type TypeChartDataPoint = Readonly<{
-    x: number;
+    x: number | string;
     y: number | null;
 }>;
 type TypeChartDataStyles = Readonly<{
@@ -22,8 +26,8 @@ type TypeChartDataStyles = Readonly<{
 }>;
 type TypeChartNumberFormat = "decimal" | "percent" | "currency" | "duration";
 type TypeChartTimeFormat = "12" | "24";
-type TypeChartTooltipDateFormatter = ({ x }: {
-    x: number;
+type TypeChartTooltipDateFormatter = ({ x, }: {
+    x: number | string;
 }) => ReactNode;
 type TypeChartTooltipProps = Readonly<{
     data: ReadonlyArray<Readonly<{
@@ -32,7 +36,7 @@ type TypeChartTooltipProps = Readonly<{
         value: number | null;
         icon?: ReactNode;
     }>>;
-    x: number;
+    x: number | string;
 }>;
 type TypeChartYAxisLabelFormatter = ({ y, yValues, }: Readonly<{
     y: number;
@@ -48,6 +52,48 @@ type TypeChartXAnnotations = Readonly<{
 type TypeChartStyleColor = string;
 type TypeChartStylePattern = "solid" | "dashed";
 type TypeChartStyleHasOnClick = boolean;
+type TypeVerticalBarChartProps = Readonly<{
+    data: ReadonlyArray<Readonly<{
+        name: string;
+        points: ReadonlyArray<TypeChartDataPoint>;
+        icon?: ReactNode;
+        styles?: TypeChartDataStyles & Readonly<{
+            pattern?: TypeChartStylePattern;
+        }>;
+    }>>;
+    invalidNumberLabel: ReactNode;
+    numberLocale: Intl.LocalesArgument;
+    textLocale: Intl.LocalesArgument;
+    tooltipDateFormatter: TypeChartTooltipDateFormatter;
+    currency?: string;
+    numberFormat?: TypeChartNumberFormat;
+    /**
+     * The maximum number of series to display.
+     * @default 10
+     * @description We recommend limiting the number of series to 10 to maintain chart readability and accessibility.
+     */
+    seriesLimit?: number;
+    /**
+     * If false, disables the warning when the number of series exceeds the seriesLimit.
+     * @default true
+     */
+    showSeriesLimitWarning?: boolean;
+    tooltip?: ({ data, x }: TypeChartTooltipProps) => ReactNode;
+    yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
+    onClick?: ({ x }: Readonly<{
+        x: number;
+    }>) => void;
+    tooltipClickLabel?: ReactNode;
+    timeFormat?: TypeChartTimeFormat;
+    xAnnotations?: TypeChartXAnnotations;
+    xAxisLabelFormatter?: (params: {
+        textLocale: Intl.LocalesArgument;
+        tickPositions: number[];
+        unitName: string;
+        value: string | number;
+        timeFormat?: string;
+    }) => string;
+}>;
 interface TypeExtendedChart extends Chart {
     annotations?: Annotation[];
 }
@@ -65,6 +111,7 @@ type TypeAreaChartProps = Readonly<{
     tooltipDateFormatter: TypeChartTooltipDateFormatter;
     tooltipTotalLabel: ReactNode;
     currency?: string;
+    disableTooltips?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ data, total, x, }: TypeChartTooltipProps & Readonly<{
         total: number | null;
@@ -90,6 +137,7 @@ declare const AreaChart: react.NamedExoticComponent<Readonly<{
     tooltipDateFormatter: TypeChartTooltipDateFormatter;
     tooltipTotalLabel: ReactNode;
     currency?: string;
+    disableTooltips?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ data, total, x, }: TypeChartTooltipProps & Readonly<{
         total: number | null;
@@ -231,6 +279,7 @@ type TypeDonutChartProps = Readonly<{
     numberLocale: Intl.LocalesArgument;
     textLocale: Intl.LocalesArgument;
     currency?: string;
+    disableTooltips?: boolean;
     hideLegend?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ color, name, percent, value, }: TypeDonutChartTooltipProps) => ReactNode;
@@ -245,6 +294,7 @@ declare const DonutChart: react.NamedExoticComponent<Readonly<{
     numberLocale: Intl.LocalesArgument;
     textLocale: Intl.LocalesArgument;
     currency?: string;
+    disableTooltips?: boolean;
     hideLegend?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ color, name, percent, value, }: TypeDonutChartTooltipProps) => ReactNode;
@@ -281,6 +331,7 @@ type TypeLineChartProps = Readonly<{
     textLocale: Intl.LocalesArgument;
     tooltipDateFormatter: TypeChartTooltipDateFormatter;
     currency?: string;
+    disableTooltips?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ data, x }: TypeChartTooltipProps) => ReactNode;
     yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
@@ -305,6 +356,7 @@ declare const LineChart: react.NamedExoticComponent<Readonly<{
     textLocale: Intl.LocalesArgument;
     tooltipDateFormatter: TypeChartTooltipDateFormatter;
     currency?: string;
+    disableTooltips?: boolean;
     numberFormat?: TypeChartNumberFormat;
     tooltip?: ({ data, x }: TypeChartTooltipProps) => ReactNode;
     yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
@@ -318,17 +370,25 @@ declare const LineChart: react.NamedExoticComponent<Readonly<{
 
 declare const baseChartOptions: Options;
 declare const TIME_SERIES_CHART_HEIGHT = 275;
+declare const timeSeriesChartOptions: Options;
 declare const lineChartOptions: Options;
 declare const areaChartOptions: Options;
+declare const columnChartOptions: Options;
+/**
+ * The default series limit for VerticalBarChart.
+ * This limit is recommended to maintain chart readability and accessibility.
+ * @see {VerticalBarChart}
+ */
+declare const VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = 10;
 declare const DONUT_CHART_HALO_SIZE = 10;
 declare const DONUT_CHART_HEIGHT: number;
 declare const DONUT_CHART_WIDTH: number;
 declare const donutChartOptions: Options;
 
-type TypeTimeSeriesOptions = SeriesSplineOptions | SeriesAreasplineOptions;
-declare const transformDataToSeries: ({ data }: {
-    data: TypeAreaChartProps["data"] | TypeLineChartProps["data"];
-}, type: "spline" | "areaspline") => TypeTimeSeriesOptions[];
+type TypeTimeSeriesOptions = SeriesSplineOptions | SeriesAreasplineOptions | SeriesColumnOptions;
+declare const transformDataToSeries: ({ data, }: {
+    data: TypeAreaChartProps["data"] | TypeLineChartProps["data"] | TypeVerticalBarChartProps["data"];
+}, type: TypeSeriesType) => TypeTimeSeriesOptions[];
 
 type TypeTransformTimeSeriesTooltipDataProps = Readonly<{
     context: TooltipFormatterContextObject;
@@ -337,15 +397,6 @@ type TypeTransformTimeSeriesTooltipDataProps = Readonly<{
 type TypeTransformTimeSeriesTooltipDataReturn = TypeChartTooltipProps["data"];
 declare const transformTimeSeriesTooltipData: ({ context, data, }: TypeTransformTimeSeriesTooltipDataProps) => TypeTransformTimeSeriesTooltipDataReturn;
 
-type TypeXAxisLabelFormatterProps = Readonly<{
-    textLocale: Intl.LocalesArgument;
-    tickPositions: AxisTickPositionsArray;
-    unitName: ExtendedTimeTicksInfoObject["unitName"];
-    value: AxisLabelsFormatterContextObject["value"];
-    timeFormat?: TypeChartTimeFormat;
-}>;
-declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, timeFormat, }: TypeXAxisLabelFormatterProps) => string;
-
 type TypeYAxisLabelFormatterProps = Readonly<{
     numberLocale: Intl.LocalesArgument;
     textLocale: Intl.LocalesArgument;
@@ -356,6 +407,79 @@ type TypeYAxisLabelFormatterProps = Readonly<{
 }>;
 declare const yAxisLabelFormatter: ({ numberLocale, textLocale, tickPositions, value, currency, numberFormat, }: TypeYAxisLabelFormatterProps) => string;
 
+type TypeXAxisLabelFormatterProps = Readonly<{
+    textLocale: Intl.LocalesArgument;
+    tickPositions: AxisTickPositionsArray;
+    unitName: ExtendedTimeTicksInfoObject["unitName"];
+    value: AxisLabelsFormatterContextObject["value"];
+    timeFormat?: TypeChartTimeFormat;
+}>;
+declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, timeFormat, }: TypeXAxisLabelFormatterProps) => string;
+
+/**
+ * Helper to detect if data is hourly time data (all x values are hours of the same day)
+ * @param data - Array of series data with points containing x values
+ * @returns boolean indicating if all x values are hours of the same day
+ */
+declare function isHourlyTimeData(data: ReadonlyArray<Readonly<{
+    points: ReadonlyArray<{
+        x: number | string;
+    }>;
+}>>): boolean;
+
+/**
+ * Helper to detect if data is categorical hour data (all x values are hour strings)
+ * Supports both 12-hour format ("12 AM", "1 PM") and 24-hour format ("00:00", "13:00", "23:00")
+ * @param data - Array of series data with points containing x values
+ * @returns boolean indicating if all x values are hour strings
+ */
+declare function isCategoricalHourData(data: ReadonlyArray<Readonly<{
+    points: ReadonlyArray<{
+        x: number | string;
+    }>;
+}>>): boolean;
+
+declare const getStorybookCategoricalData: ({ showNulls, showNegativeValues, numberOfSeries, yAxisMax, showCustomColors, showDashedLines, categoryType, }: {
+    showNulls: boolean;
+    showNegativeValues: boolean;
+    numberOfSeries: number;
+    yAxisMax: number;
+    showCustomColors: boolean;
+    showDashedLines: boolean;
+    categoryType: "hours" | "hours24" | "days" | "months" | "custom";
+}) => {
+    points: {
+        x: string;
+        y: number | null;
+    }[];
+    name: string;
+    styles: {
+        color: string | undefined;
+        pattern: string;
+    };
+}[];
+
+declare const getStorybookSparseTimelineData: ({ showNulls, showNegativeValues, numberOfSeries, yAxisMax, showCustomColors, showDashedLines, numberOfPoints, timeSpanHours, }: {
+    showNulls: boolean;
+    showNegativeValues: boolean;
+    numberOfSeries: number;
+    yAxisMax: number;
+    showCustomColors: boolean;
+    showDashedLines: boolean;
+    numberOfPoints?: number;
+    timeSpanHours?: number;
+}) => {
+    points: {
+        x: number;
+        y: number | null;
+    }[];
+    name: string;
+    styles: {
+        color: string | undefined;
+        pattern: string;
+    };
+}[];
+
 declare const GlobalChartStyleOverrides: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
 declare const baseChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
     $colors: ReadonlyArray<TypeChartStyleColor>;
@@ -377,4 +501,4 @@ declare const donutChartStyles: styled_components.FlattenInterpolation<styled_co
     $colors: ReadonlyArray<TypeChartStyleColor>;
 }>, any>>;
 
-export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipPortal, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, GlobalChartStyleOverrides, LineChart, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeAreaChartProps, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartLegendLabelProps, type TypeChartLegendProps, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTimeFormat, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartTooltipTableProps, type TypeChartXAnnotations, type TypeChartXAnnotationsDetails, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeExtendedChart, type TypeLegendLabel, type TypeLineChartProps, areaChartOptions, areaChartStyles, baseChartOptions, baseChartStyles, donutChartOptions, donutChartStyles, generateChartTooltipPortalId, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, lineChartStyles, timeSeriesChartStyles, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
+export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipPortal, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, GlobalChartStyleOverrides, LineChart, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeAreaChartProps, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartLegendLabelProps, type TypeChartLegendProps, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTimeFormat, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartTooltipTableProps, type TypeChartXAnnotations, type TypeChartXAnnotationsDetails, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeExtendedChart, type TypeLegendLabel, type TypeLineChartProps, type TypeSeriesType, type TypeVerticalBarChartProps, VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT, areaChartOptions, areaChartStyles, baseChartOptions, baseChartStyles, columnChartOptions, donutChartOptions, donutChartStyles, generateChartTooltipPortalId, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, getStorybookCategoricalData, getStorybookSparseTimelineData, isCategoricalHourData, isHourlyTimeData, lineChartOptions, lineChartStyles, timeSeriesChartOptions, timeSeriesChartStyles, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };