Base Chart

export type DataType = Record<string, string | number | null>;
 
export type BaseChartProps = ResponsiveContainerProps & {
  /**
   * The data key to assign to the x-axis.
   */
  dataKeyX?: string | ((data: DataType) => string | number);
  /**
   * Whether to show the grid.
   *
   * @defaultValue true
   */
  showGrid?: boolean;
  /**
   * Whether to show the x-axis.
   *
   * @defaultValue false
   */
  showXAxis?: boolean;
  /**
   * Whether to show the tooltip.
   *
   * @defaultValue true
   */
  showTooltip?: boolean;
  /**
   * Whether to show the legend.
   *
   * @defaultValue false
   */
  showLegend?: boolean;
  /**
   * Set the position of the legend.
   *
   * @defaultValue 'right'
   */
  legendAlign?: LegendProps['align'];
  /**
   * Set the grid density (number of ticks).
   * This is used only if the grid is rendered.
   *
   * @defaultValue 'mid'
   */
  density?: 'low' | 'mid' | 'high';
  /**
   * The cursor style for the tooltip.
   */
  cursorStyle?: Record<string, string | number> | false;
  /**
   * The padding for the x-axis. Prevent lines from touching the edges.
   */
  xPadding?: number;
  /**
   * Set the domain for the X axis.
   * @url https://recharts.org/en-US/api/XAxis#domain
   */
  xDomain?: XAxisProps['domain'];
  /**
   * Set the domain for the left Y axis.
   */
  yDomainLeft?: YAxisProps['domain'];
  /**
   * Set the domain for the right Y axis.
   */
  yDomainRight?: YAxisProps['domain'];
  /**
   * Set the domain for the left Y axis.
   */
  yTypeLeft?: YAxisProps['type'];
  /**
   * Set the domain for the right Y axis.
   */
  yTypeRight?: YAxisProps['type'];
  /**
   * Allow decimals on the Y axis.
   *
   * @defaultValue false
   */
  allowYDecimals?: YAxisProps['allowDecimals'];
  /**
   * Disable the animation for the chart.
   *
   * @defaultValue false
   */
  disableAnimation?: boolean;
  /**
   * Whether to show the payload colors inside tooltip.
   *
   * @defaultValue true
   */
  tooltipColors?: boolean;
  /**
   * custom function to format the tooltip label/title
   * @param value TooltipEntry
   * @returns string
   */
  formatTooltipLabel?: TooltipProps['formatLabel'];
  /**
   * custom function to format the payload labels
   * @param value TooltipEntry
   * @returns string
   */
  formatTooltipName?: TooltipProps['formatName'];
  /**
   * custom function to format the payload values
   * @param entry TooltipEntry
   * @returns React.ReactNode
   */
  formatTooltipValue?: TooltipProps['formatValue'];
  /**
   * custom function to format the payload values
   * @param entry TooltipEntry
   * @returns React.ReactNode
   */
  tooltipDecorator?: TooltipProps['tooltipDecorator'];
  /**
   * Render a custom tooltip instead of the default one.
   *
   * @param props { active?: boolean; label?: string; payload?: TooltipEntry[]; }
   * @returns JSX.Element
   */
  customTooltip?: (props: TooltipProps) => JSX.Element;
};