React ChartsLegend

position: AgChartLegendPosition;

type AgChartLegendPosition = 
      'top' 
    | 'right' 
    | 'bottom' 
    | 'left'

orientation: AgChartOrientation;

type AgChartOrientation = 
      'horizontal' 
    | 'vertical'

maxWidth: PixelSize;

type PixelSize = number

maxHeight: PixelSize;

type PixelSize = number

spacing: PixelSize;

type PixelSize = number

item: AgChartLegendItemOptions;

interface AgChartLegendItemOptions {
  // Configuration for the legend markers. 
  marker?: AgChartLegendMarkerOptions;
  // Configuration for the legend labels. 
  label?: AgChartLegendLabelOptions;
  // Used to constrain the width of legend items. 
  maxWidth?: PixelSize;
  // The horizontal spacing in pixels to use between legend items. 
  paddingX?: PixelSize;
  // The vertical spacing in pixels to use between legend items. 
  paddingY?: PixelSize;
  // Set to `false` to turn off toggling of the series visibility in the chart when the legend item is clicked. 
  toggleSeriesVisible?: boolean;
}

interface AgChartLegendMarkerOptions {
  // The size in pixels of the markers in the legend. 
  size?: PixelSize;
  // If set, overrides the marker shape from the series and the legend will show the specified marker shape instead. If not set, will use a marker shape matching the shape from the series, or fall back to `'square'` if there is none. 
  shape?: MarkerShape;
  // The padding in pixels between a legend marker and the corresponding label. 
  padding?: PixelSize;
  // The width in pixels of the stroke for markers in the legend. 
  strokeWidth?: PixelSize;
}

type PixelSize = number

type MarkerShape = 
      'circle' 
    | 'cross' 
    | 'diamond' 
    | 'heart' 
    | 'plus' 
    | 'triangle' 
    | any


interface AgChartLegendLabelOptions {
  // If the label text exceeds the maximum length, it will be truncated and an ellipsis will be appended to indicate this. 
  maxLength?: number;
  // The colour of the text. 
  color?: CssColor;
  // The font style to use for the legend. 
  fontStyle?: FontStyle;
  // The font weight to use for the legend. 
  fontWeight?: FontWeight;
  // The font size in pixels to use for the legend. 
  fontSize?: FontSize;
  // The font family to use for the legend. 
  fontFamily?: FontFamily;
  // Function used to render legend labels. Where `id` is a series ID, `itemId` is component ID within a series, such as a field name or an item index. 
  formatter?: (params: AgChartLegendLabelFormatterParams) => string;
}

type CssColor = string

type FontStyle = 
      'normal' 
    | 'italic' 
    | 'oblique'


type FontWeight = 
      'normal' 
    | 'bold' 
    | 'bolder' 
    | 'lighter' 
    | '100' 
    | '200' 
    | '300' 
    | '400' 
    | '500' 
    | '600' 
    | '700' 
    | '800' 
    | '900'


type FontSize = number

type FontFamily = string

interface AgChartLegendLabelFormatterParams {
  seriesId: string;
  itemId: any;
  value: string;
}

listeners: AgChartLegendListeners;

interface AgChartLegendListeners {
  // The listener to call when a legend item is clicked. 
  legendItemClick?: (event: AgChartLegendClickEvent) => void;
  // The listener to call when a legend item is double clicked. 
  legendItemDoubleClick?: (event: AgChartLegendDoubleClickEvent) => void;
}

interface AgChartLegendClickEvent {
  type: T;
  // Series id 
  seriesId: string;
  // Legend item id - usually yKey value for cartesian series. 
  itemId: string;
  // Whether the legend item is currently enabled or not. 
  enabled: boolean;
}

interface AgChartLegendDoubleClickEvent {
  type: T;
  // Series id 
  seriesId: string;
  // Legend item id - usually yKey value for cartesian series. 
  itemId: string;
  // Whether the legend item is currently enabled or not. 
  enabled: boolean;
}

pagination: AgChartLegendPaginationOptions;

interface AgChartLegendPaginationOptions {
  // Configuration for the pagination markers. 
  marker?: AgPaginationMarkerOptions;
  // Configuration for pagination buttons when a button is active. 
  activeStyle?: AgPaginationMarkerStyle;
  // Configuration for pagination buttons when a button is inactive. 
  inactiveStyle?: AgPaginationMarkerStyle;
  // Configuration for pagination buttons when a button is hovered over. 
  highlightStyle?: AgPaginationMarkerStyle;
  // Configuration for the pagination label. 
  label?: AgPaginationLabelOptions;
}

interface AgPaginationMarkerOptions {
  // The size in pixels of the pagination buttons. 
  size?: PixelSize;
  // If set, overrides the marker shape for the pagination buttons. If not set, the pagination buttons will default to the `'triangle'` marker shape. 
  shape?: MarkerShape;
  // The inner padding in pixels between a pagination button and the pagination label. 
  padding?: PixelSize;
}

type PixelSize = number

type MarkerShape = 
      'circle' 
    | 'cross' 
    | 'diamond' 
    | 'heart' 
    | 'plus' 
    | 'triangle' 
    | any


interface AgPaginationMarkerStyle {
  // The fill colour to use for the pagination button markers. 
  fill?: CssColor;
  // Opacity of the pagination buttons. 
  fillOpacity?: Opacity;
  // The colour to use for the button strokes. 
  stroke?: CssColor;
  // The width in pixels of the button strokes. 
  strokeWidth?: PixelSize;
  // Opacity of the button strokes. 
  strokeOpacity?: Opacity;
}

type CssColor = string

type Opacity = number

interface AgPaginationLabelOptions {
  // The colour of the text. 
  color?: CssColor;
  // The font style to use for the pagination label. 
  fontStyle?: FontStyle;
  // The font weight to use for the pagination label. 
  fontWeight?: FontWeight;
  // The font size in pixels to use for the pagination label. 
  fontSize?: FontSize;
  // The font family to use for the pagination label. 
  fontFamily?: FontFamily;
}

type FontStyle = 
      'normal' 
    | 'italic' 
    | 'oblique'


type FontWeight = 
      'normal' 
    | 'bold' 
    | 'bolder' 
    | 'lighter' 
    | '100' 
    | '200' 
    | '300' 
    | '400' 
    | '500' 
    | '600' 
    | '700' 
    | '800' 
    | '900'


type FontSize = number

type FontFamily = string