@mui/x-charts/ChartsLegend/PiecewiseColorLegend.d.ts

The community edition of MUI X Charts components.

import * as React from 'react';
import { SxProps, Theme } from '@mui/material/styles';
import { PrependKeys } from '@mui/x-internals/types';
import { ChartsLabelMarkProps } from "../ChartsLabel/ChartsLabelMark.js";
import { Direction } from "./direction.js";
import { PiecewiseColorLegendClasses } from "./piecewiseColorLegendClasses.js";
import { ColorLegendSelector } from "./colorLegend.types.js";
import { PiecewiseLabelFormatterParams } from "./piecewiseColorLegend.types.js";
import { PiecewiseColorLegendItemContext } from "./legendContext.types.js";
export interface PiecewiseColorLegendProps extends ColorLegendSelector, PrependKeys<Pick<ChartsLabelMarkProps, 'type'>, 'mark'> {
  /**
   * The direction of the legend layout.
   * @default 'horizontal'
   */
  direction?: Direction;
  /**
   * Format the legend labels.
   * @param {PiecewiseLabelFormatterParams} params The bound of the piece to format.
   * @returns {string|null} The displayed label, `''` to skip the label but show the color mark, or `null` to skip it entirely.
   */
  labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
  /**
   * Where to position the labels relative to the gradient.
   * @default 'extremes'
   */
  labelPosition?: 'start' | 'end' | 'extremes';
  /**
   * Callback fired when a legend item is clicked.
   * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.
   * @param {PiecewiseColorLegendItemContext} legendItem The legend item data.
   * @param {number} index The index of the clicked legend item.
   */
  onItemClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: PiecewiseColorLegendItemContext, index: number) => void;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<PiecewiseColorLegendClasses>;
  className?: string;
  sx?: SxProps<Theme>;
  tabIndex?: number;
}
declare const PiecewiseColorLegend: React.ForwardRefExoticComponent<PiecewiseColorLegendProps & import("./chartsLegend.types.js").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
export { PiecewiseColorLegend };