import React from 'react';
/**
 * Chart parts for charts drawn with visx.
 *
 * IonBase does not draw charts, and does not depend on visx. visx owns scales,
 * shapes and layout; these own what a chart looks like and the two pieces
 * every chart needs and no charting library supplies — a tooltip panel and a
 * legend. See `styles/chart.css` for the classes, and why they are classes.
 */
/** Which of `--chart-1…8` a series takes. Series are coloured in order. */
export type ChartSeries = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
/** The class that colours a series: its line, bar, area, points and swatch. */
export declare const chartSeriesClass: (series: ChartSeries) => string;
/**
 * Spread onto visx `AxisLeft` / `AxisBottom` / `Axis`. Themes the axis line,
 * tick marks and tick labels through `chart.css`, overriding the `#222` visx
 * writes as attributes.
 *
 *   <AxisBottom scale={x} top={h} {...chartAxisProps} />
 *
 * Passing your own `tickLabelProps` replaces this one — keep
 * `className: 'ion-chart__tick'` in it.
 */
export declare const chartAxisProps: {
    axisLineClassName: string;
    tickClassName: string;
    labelClassName: string;
    tickLabelProps: {
        className: string;
    };
};
/**
 * Spread onto visx `GridRows` / `GridColumns`. Gridlines take `border/subtle`,
 * the quietest rule, so they sit behind the data rather than competing with it.
 */
export declare const chartGridProps: {
    className: string;
};
/**
 * Spread onto visx `Tooltip` / `TooltipWithBounds` / `TooltipInPortal`, with a
 * `ChartTooltip` inside. visx then only positions it; the panel is ours.
 */
export declare const chartTooltipProps: {
    unstyled: boolean;
    applyPositionStyle: boolean;
};
export interface ChartTooltipRow {
    /** The series or measure, e.g. "Success rate". */
    label: React.ReactNode;
    /** Already formatted — the tooltip cannot know the unit or precision. */
    value: React.ReactNode;
    /** Shows the series' swatch beside the label, matching the legend. */
    series?: ChartSeries;
}
export interface ChartTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
    /** What the pointer is over — usually the x value, e.g. a date. */
    title?: React.ReactNode;
    /** One row per series at that point. */
    rows?: ChartTooltipRow[];
    /** Free content after the rows, for anything that is not label/value. */
    children?: React.ReactNode;
}
/**
 * ChartTooltip — the panel that shows the values under the pointer.
 *
 * Put it inside visx's Tooltip with `chartTooltipProps`, so visx places it and
 * this draws it: raised, rimmed and shadowed like Popover and Toast.
 *
 * IT IS NOT THE ACCESSIBLE WAY TO THE DATA. It appears on hover, so a keyboard
 * or screen-reader user never sees it. Every chart still needs a text summary
 * and the values in a table (visually hidden is fine) — the tooltip is a
 * convenience for pointer users, never the only route to a number.
 */
export declare const ChartTooltip: React.ForwardRefExoticComponent<ChartTooltipProps & React.RefAttributes<HTMLDivElement>>;
export type ChartLegendShape = 'square' | 'line';
export interface ChartLegendItem {
    label: React.ReactNode;
    series: ChartSeries;
}
export interface ChartLegendProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
    /** One per series, in the order the series are drawn. */
    items: ChartLegendItem[];
    /** `square` for bars and areas, `line` for line charts. */
    shape?: ChartLegendShape;
}
/**
 * ChartLegend — which colour is which series.
 *
 * Colour alone never identifies a series (SC 1.4.1), so any chart with more
 * than one series needs this, or direct labels on the lines. The swatch reads
 * the same `--chart-<n>` as the series itself, through `chartSeriesClass`, so
 * the two cannot drift apart.
 */
export declare const ChartLegend: React.ForwardRefExoticComponent<ChartLegendProps & React.RefAttributes<HTMLUListElement>>;
//# sourceMappingURL=Chart.d.ts.map