@mui/x-charts/ChartsAxisHighlightValue/ChartsAxisHighlightValue.d.ts

The community edition of MUI X Charts components.

import { type SxProps } from '@mui/material/styles';
import { type AxisId } from "../models/axis.js";
export type ChartsAxisHighlightValuePosition = 'start' | 'end' | 'both' | 'none';
export interface ChartsAxisHighlightValueProps {
  /**
   * The axis direction.
   */
  axisDirection: 'x' | 'y';
  /**
   * The id of the axis.
   * If not provided, defaults to the first axis.
   */
  axisId?: AxisId;
  /**
   * The position of the label relative to the drawing area.
   * - `'start'`: at the beginning of the drawing area (top for x-axis, left for y-axis).
   * - `'end'`: at the end of the drawing area (bottom for x-axis, right for y-axis).
   * - `'both'`: at both positions.
   * - `'none'`: no label is displayed.
   * @default 'end'
   */
  labelPosition?: ChartsAxisHighlightValuePosition;
  /**
   * The value to display.
   * If not defined, tracks the axis highlight value from user interaction.
   */
  value?: number | Date | string | null;
  /**
   * A function to format the displayed value.
   * If not provided, uses the axis `valueFormatter`, or falls back to a default formatter.
   * @param {number | Date | string} value The value to format.
   * @returns {string} The formatted string.
   */
  valueFormatter?: (value: number | Date | string) => string;
  sx?: SxProps;
}
/**
 * A component that displays the axis value at the edge of the drawing area,
 * aligned with the current axis highlight position.
 *
 * Renders as a portal into the ChartsLayerContainer, appearing as the last child.
 *
 * Demos:
 *
 * - [Custom components](https://mui.com/x/react-charts/components/)
 *
 * API:
 *
 * - [ChartsAxisHighlightValue API](https://mui.com/x/api/charts/charts-axis-highlight-value/)
 */
declare function ChartsAxisHighlightValue(props: ChartsAxisHighlightValueProps): import("react").ReactPortal | import("react/jsx-runtime").JSX.Element[] | null;
declare namespace ChartsAxisHighlightValue {
  var propTypes: any;
}
export { ChartsAxisHighlightValue };