useCartesianScale

Converts a data point (in data coordinates) to pixel coordinates.

This hook is useful for positioning annotations, custom shapes, or other elements at specific data points on the chart. It uses the axis scales to convert data values to their corresponding pixel positions within the chart area.

This hook must be used within a chart context (inside a LineChart, BarChart, etc.). Returns undefined if used outside a chart context, or if the axes don't exist, or if the data point cannot be converted (e.g., if the data values are outside the axis domains).

This is a convenience hook that combines useXAxisScale and useYAxisScale together in a single call.

Available since Recharts 3.8

Return value

Coordinate | undefined

The pixel x,y coordinates, or undefined if conversion is not possible.

Props

  • dataPointCartesianDataPoint

    The data point with x and y values in data coordinates.

  • xAxisIdnumber | stringoptional

    The xAxisId of the X-axis. Defaults to 0 if not provided.

    DEFAULT: "defaultAxisId"

  • yAxisIdnumber | stringoptional

    The yAxisId of the Y-axis. Defaults to 0 if not provided.

    DEFAULT: "defaultAxisId"