Base chart

Base Chart

Internal component used to wrap all the charts and provide shared props, and handle responsive behavior.

API Reference

The following props are shared across all charts.

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;
};