@mui/x-charts 8.17.0 → 8.18.0

package/esm/hooks/useAxis.d.ts

@@ -2,12 +2,17 @@ import { AxisId, ChartsRadiusAxisProps, ChartsRotationAxisProps, PolarAxisDefaul
 /**
  * Get all the x-axes.
  *
- * - `xAxis` is an object with the shape `{ [axisId]: axis }`.
- * - `xAxisIds` is an array of axis IDs.
+ * Returns all X axes configured in the chart along with their IDs.
+ * This is useful when you need to iterate over multiple axes or access all axis configurations at once.
  *
- * If access to a specific X axis is needed, use the `useXAxis` hook instead.
+ * @returns An object containing:
+ *   - `xAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `xAxisIds`: An array of all X axis IDs in the chart
  *
- * @returns `{ xAxis, xAxisIds }` - The x-axes and their IDs.
+ * @example
+ * const { xAxis, xAxisIds } = useXAxes();
+ *
+ * @see `useXAxis` for accessing a single X axis
  */
 export declare function useXAxes(): {
   xAxis: import("../internals/index.js").ComputedAxisConfig<ChartsXAxisProps>;
@@ -16,36 +21,131 @@ export declare function useXAxes(): {
 /**
  * Get all the y-axes.
  *
- * - `yAxis` is an object with the shape `{ [axisId]: axis }`.
- * - `yAxisIds` is an array of axis IDs.
+ * Returns all Y axes configured in the chart along with their IDs.
+ * This is useful when you need to iterate over multiple axes or access all axis configurations at once.
+ *
+ * @returns An object containing:
+ *   - `yAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `yAxisIds`: An array of all Y axis IDs in the chart
  *
- * If access to a specific Y axis is needed, use the `useYAxis` hook instead.
+ * @example
+ * const { yAxis, yAxisIds } = useYAxes();
  *
- * @returns `{ yAxis, yAxisIds }` - The y-axes and their IDs.
+ * @see `useYAxis` for accessing a single Y axis
  */
 export declare function useYAxes(): {
   yAxis: import("../internals/index.js").ComputedAxisConfig<ChartsYAxisProps>;
   yAxisIds: AxisId[];
 };
 /**
- * Get the X axis.
- * @param {AxisId | undefined} axisId - If provided returns the x axis with axisId, else returns the values for the default x axis.
- * @returns The X axis.
+ * Get a specific X axis or the default X axis.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `xAxis` prop
+ *   - Undefined to get the default (first) X axis
+ * @returns The configuration for a single X axis.
+ *
+ * @example
+ * // Get the default X axis
+ * const xAxis = useXAxis();
+ *
+ * @example
+ * // Get a specific X axis by string ID
+ * const xAxis = useXAxis('revenue');
  */
 export declare function useXAxis<T extends keyof AxisScaleConfig>(axisId?: AxisId): ComputedAxis<T, any, ChartsXAxisProps>;
 /**
- * Get the Y axis.
- * @param {AxisId | undefined} axisId - If provided returns the y axis with axisId, else returns the values for the default y axis.
- * @returns The Y axis.
+ * Get a specific Y axis or the default Y axis.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `yAxis` prop
+ *   - Undefined to get the default (first) Y axis
+ * @returns The configuration for a single Y axis.
+ *
+ * @example
+ * // Get the default Y axis
+ * const yAxis = useYAxis();
+ *
+ * @example
+ * // Get a specific Y axis by string ID
+ * const yAxis = useYAxis('temperature');
  */
 export declare function useYAxis<T extends keyof AxisScaleConfig>(axisId?: AxisId): ComputedAxis<T, any, ChartsYAxisProps>;
+/**
+ * Get all the rotation axes for polar charts.
+ *
+ * Returns all rotation axes configured in polar charts along with their IDs.
+ * Rotation axes are used in charts like `RadarChart` to define angular positioning.
+ *
+ * @returns An object containing:
+ *   - `rotationAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `rotationAxisIds`: An array of all rotation axis IDs in the chart
+ *
+ * @example
+ * const { rotationAxis, rotationAxisIds } = useRotationAxes();
+ *
+ * @see `useRotationAxis` for accessing a single rotation axis
+ */
 export declare function useRotationAxes(): {
   rotationAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js").DefaultizedAxisConfig<ChartsRotationAxisProps>;
   rotationAxisIds: string[];
 };
+/**
+ * Get all the radius axes for polar charts.
+ *
+ * Returns all radial axes configured in polar charts along with their IDs.
+ * Radius axes are used in charts like `RadarChart` to define radial positioning and scaling.
+ *
+ * @returns An object containing:
+ *   - `radiusAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `radiusAxisIds`: An array of all radius axis IDs in the chart
+ *
+ * @example
+ * const { radiusAxis, radiusAxisIds } = useRadiusAxes();
+ *
+ * @see `useRadiusAxis` for accessing a single radius axis
+ */
 export declare function useRadiusAxes(): {
   radiusAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js").DefaultizedAxisConfig<ChartsRadiusAxisProps>;
   radiusAxisIds: string[];
 };
-export declare function useRotationAxis(identifier?: number | string): PolarAxisDefaultized<ScaleName, any, ChartsRotationAxisProps> | undefined;
-export declare function useRadiusAxis(identifier?: number | string): PolarAxisDefaultized<ScaleName, any, ChartsRadiusAxisProps> | undefined;
+/**
+ * Get a specific rotation axis or the default rotation axis for polar charts.
+ *
+ * Returns the configuration and scale for a rotation axis in polar charts.
+ * The rotation axis controls the angular positioning of data points around the circle.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's rotation axis configuration
+ *   - Undefined to get the default (first) rotation axis
+ * @returns The rotation axis configuration, or undefined if not found
+ *
+ * @example
+ * // Get the default rotation axis
+ * const rotationAxis = useRotationAxis();
+ *
+ * @example
+ * // Get a specific rotation axis by string ID
+ * const rotationAxis = useRotationAxis('categories');
+ */
+export declare function useRotationAxis(axisId?: AxisId): PolarAxisDefaultized<ScaleName, any, ChartsRotationAxisProps> | undefined;
+/**
+ * Get a specific radius axis or the default radius axis for polar charts.
+ *
+ * Returns the configuration and scale for a radial axis in polar charts.
+ * The radius axis controls the radial distance of data points from the center of the circle.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's radius axis configuration
+ *   - Undefined to get the default (first) radius axis
+ * @returns The radius axis configuration, or undefined if not found
+ *
+ * @example
+ * // Get the default radius axis
+ * const radiusAxis = useRadiusAxis();
+ *
+ * @example
+ * // Get a specific radius axis by string ID
+ * const radiusAxis = useRadiusAxis('magnitude');
+ */
+export declare function useRadiusAxis(axisId?: AxisId): PolarAxisDefaultized<ScaleName, any, ChartsRadiusAxisProps> | undefined;

package/esm/hooks/useAxis.js

@@ -7,12 +7,17 @@ import { useStore } from "../internals/store/useStore.js";
 /**
  * Get all the x-axes.
  *
- * - `xAxis` is an object with the shape `{ [axisId]: axis }`.
- * - `xAxisIds` is an array of axis IDs.
+ * Returns all X axes configured in the chart along with their IDs.
+ * This is useful when you need to iterate over multiple axes or access all axis configurations at once.
  *
- * If access to a specific X axis is needed, use the `useXAxis` hook instead.
+ * @returns An object containing:
+ *   - `xAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `xAxisIds`: An array of all X axis IDs in the chart
  *
- * @returns `{ xAxis, xAxisIds }` - The x-axes and their IDs.
+ * @example
+ * const { xAxis, xAxisIds } = useXAxes();
+ *
+ * @see `useXAxis` for accessing a single X axis
  */
 export function useXAxes() {
   const store = useStore();
@@ -29,12 +34,17 @@ export function useXAxes() {
 /**
  * Get all the y-axes.
  *
- * - `yAxis` is an object with the shape `{ [axisId]: axis }`.
- * - `yAxisIds` is an array of axis IDs.
+ * Returns all Y axes configured in the chart along with their IDs.
+ * This is useful when you need to iterate over multiple axes or access all axis configurations at once.
+ *
+ * @returns An object containing:
+ *   - `yAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `yAxisIds`: An array of all Y axis IDs in the chart
  *
- * If access to a specific Y axis is needed, use the `useYAxis` hook instead.
+ * @example
+ * const { yAxis, yAxisIds } = useYAxes();
  *
- * @returns `{ yAxis, yAxisIds }` - The y-axes and their IDs.
+ * @see `useYAxis` for accessing a single Y axis
  */
 export function useYAxes() {
   const store = useStore();
@@ -49,9 +59,20 @@ export function useYAxes() {
 }
 
 /**
- * Get the X axis.
- * @param {AxisId | undefined} axisId - If provided returns the x axis with axisId, else returns the values for the default x axis.
- * @returns The X axis.
+ * Get a specific X axis or the default X axis.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `xAxis` prop
+ *   - Undefined to get the default (first) X axis
+ * @returns The configuration for a single X axis.
+ *
+ * @example
+ * // Get the default X axis
+ * const xAxis = useXAxis();
+ *
+ * @example
+ * // Get a specific X axis by string ID
+ * const xAxis = useXAxis('revenue');
  */
 export function useXAxis(axisId) {
   const store = useStore();
@@ -64,9 +85,20 @@ export function useXAxis(axisId) {
 }
 
 /**
- * Get the Y axis.
- * @param {AxisId | undefined} axisId - If provided returns the y axis with axisId, else returns the values for the default y axis.
- * @returns The Y axis.
+ * Get a specific Y axis or the default Y axis.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `yAxis` prop
+ *   - Undefined to get the default (first) Y axis
+ * @returns The configuration for a single Y axis.
+ *
+ * @example
+ * // Get the default Y axis
+ * const yAxis = useYAxis();
+ *
+ * @example
+ * // Get a specific Y axis by string ID
+ * const yAxis = useYAxis('temperature');
  */
 export function useYAxis(axisId) {
   const store = useStore();
@@ -77,6 +109,22 @@ export function useYAxis(axisId) {
   const id = axisId ?? yAxisIds[0];
   return yAxis[id];
 }
+
+/**
+ * Get all the rotation axes for polar charts.
+ *
+ * Returns all rotation axes configured in polar charts along with their IDs.
+ * Rotation axes are used in charts like `RadarChart` to define angular positioning.
+ *
+ * @returns An object containing:
+ *   - `rotationAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `rotationAxisIds`: An array of all rotation axis IDs in the chart
+ *
+ * @example
+ * const { rotationAxis, rotationAxisIds } = useRotationAxes();
+ *
+ * @see `useRotationAxis` for accessing a single rotation axis
+ */
 export function useRotationAxes() {
   const store = useStore();
   const {
@@ -88,6 +136,22 @@ export function useRotationAxes() {
     rotationAxisIds
   };
 }
+
+/**
+ * Get all the radius axes for polar charts.
+ *
+ * Returns all radial axes configured in polar charts along with their IDs.
+ * Radius axes are used in charts like `RadarChart` to define radial positioning and scaling.
+ *
+ * @returns An object containing:
+ *   - `radiusAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `radiusAxisIds`: An array of all radius axis IDs in the chart
+ *
+ * @example
+ * const { radiusAxis, radiusAxisIds } = useRadiusAxes();
+ *
+ * @see `useRadiusAxis` for accessing a single radius axis
+ */
 export function useRadiusAxes() {
   const store = useStore();
   const {
@@ -99,21 +163,61 @@ export function useRadiusAxes() {
     radiusAxisIds
   };
 }
-export function useRotationAxis(identifier) {
+
+/**
+ * Get a specific rotation axis or the default rotation axis for polar charts.
+ *
+ * Returns the configuration and scale for a rotation axis in polar charts.
+ * The rotation axis controls the angular positioning of data points around the circle.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's rotation axis configuration
+ *   - Undefined to get the default (first) rotation axis
+ * @returns The rotation axis configuration, or undefined if not found
+ *
+ * @example
+ * // Get the default rotation axis
+ * const rotationAxis = useRotationAxis();
+ *
+ * @example
+ * // Get a specific rotation axis by string ID
+ * const rotationAxis = useRotationAxis('categories');
+ */
+export function useRotationAxis(axisId) {
   const store = useStore();
   const {
     axis: rotationAxis,
     axisIds: rotationAxisIds
   } = useSelector(store, selectorChartRotationAxis);
-  const id = typeof identifier === 'string' ? identifier : rotationAxisIds[identifier ?? 0];
+  const id = axisId ?? rotationAxisIds[0];
   return rotationAxis[id];
 }
-export function useRadiusAxis(identifier) {
+
+/**
+ * Get a specific radius axis or the default radius axis for polar charts.
+ *
+ * Returns the configuration and scale for a radial axis in polar charts.
+ * The radius axis controls the radial distance of data points from the center of the circle.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's radius axis configuration
+ *   - Undefined to get the default (first) radius axis
+ * @returns The radius axis configuration, or undefined if not found
+ *
+ * @example
+ * // Get the default radius axis
+ * const radiusAxis = useRadiusAxis();
+ *
+ * @example
+ * // Get a specific radius axis by string ID
+ * const radiusAxis = useRadiusAxis('magnitude');
+ */
+export function useRadiusAxis(axisId) {
   const store = useStore();
   const {
     axis: radiusAxis,
     axisIds: radiusAxisIds
   } = useSelector(store, selectorChartRadiusAxis);
-  const id = typeof identifier === 'string' ? identifier : radiusAxisIds[identifier ?? 0];
+  const id = axisId ?? radiusAxisIds[0];
   return radiusAxis[id];
 }

package/esm/hooks/useScale.d.ts

@@ -13,16 +13,35 @@ export declare function getValueToPositionMapper<Domain extends {
 /**
  * Get the X scale.
  *
- * @param {AxisId | undefined} axisId - If provided returns the scale for the x axis with axisId, else returns the values for the default x axis.
- * @returns {AxisScaleConfig[S]['scale']} The scale for the specified X axis.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `xAxis` prop
+ *   - Undefined to get the default (first) X axis
+ * @returns The X axis scale
  */
 export declare function useXScale<S extends ScaleName>(axisId?: AxisId): AxisScaleConfig[S]['scale'];
 /**
  * Get the Y scale.
  *
- * @param {AxisId | undefined} axisId - If provided returns the scale for the y axis with axisId, else returns the values for the default y axis.
- * @returns {AxisScaleConfig[S]['scale']} The scale for the specified Y axis.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `yAxis` prop
+ *   - Undefined to get the default (first) Y axis
+ * @returns The Y axis scale
  */
 export declare function useYScale<S extends ScaleName>(axisId?: AxisId): AxisScaleConfig[S]['scale'];
-export declare function useRotationScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'] | undefined;
-export declare function useRadiusScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'] | undefined;
+/**
+ * Get the rotation scale.
+ *
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `rotationAxis` prop
+ *   - Undefined to get the default rotation axis
+ * @returns The rotation axis scale, or undefined if not found
+ */
+export declare function useRotationScale<S extends ScaleName>(axisId?: number | string): AxisScaleConfig[S]['scale'] | undefined;
+/**
+ * Get the radius scale.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `radiusAxis` prop
+ *   - Undefined to get the default radius axis
+ * @returns The radius axis scale, or undefined if not found
+ */
+export declare function useRadiusScale<S extends ScaleName>(axisId?: number | string): AxisScaleConfig[S]['scale'] | undefined;

package/esm/hooks/useScale.js

@@ -25,8 +25,10 @@ export function getValueToPositionMapper(scale) {
 /**
  * Get the X scale.
  *
- * @param {AxisId | undefined} axisId - If provided returns the scale for the x axis with axisId, else returns the values for the default x axis.
- * @returns {AxisScaleConfig[S]['scale']} The scale for the specified X axis.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `xAxis` prop
+ *   - Undefined to get the default (first) X axis
+ * @returns The X axis scale
  */
 export function useXScale(axisId) {
   const axis = useXAxis(axisId);
@@ -36,18 +38,37 @@ export function useXScale(axisId) {
 /**
  * Get the Y scale.
  *
- * @param {AxisId | undefined} axisId - If provided returns the scale for the y axis with axisId, else returns the values for the default y axis.
- * @returns {AxisScaleConfig[S]['scale']} The scale for the specified Y axis.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `yAxis` prop
+ *   - Undefined to get the default (first) Y axis
+ * @returns The Y axis scale
  */
 export function useYScale(axisId) {
   const axis = useYAxis(axisId);
   return axis.scale;
 }
-export function useRotationScale(identifier) {
-  const axis = useRotationAxis(identifier);
+
+/**
+ * Get the rotation scale.
+ *
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `rotationAxis` prop
+ *   - Undefined to get the default rotation axis
+ * @returns The rotation axis scale, or undefined if not found
+ */
+export function useRotationScale(axisId) {
+  const axis = useRotationAxis(axisId);
   return axis?.scale;
 }
-export function useRadiusScale(identifier) {
-  const axis = useRadiusAxis(identifier);
+
+/**
+ * Get the radius scale.
+ * @param axisId - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `radiusAxis` prop
+ *   - Undefined to get the default radius axis
+ * @returns The radius axis scale, or undefined if not found
+ */
+export function useRadiusScale(axisId) {
+  const axis = useRadiusAxis(axisId);
   return axis?.scale;
 }

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.17.0
+ * @mui/x-charts v8.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/models/seriesType/bar.d.ts

@@ -44,6 +44,13 @@ export interface BarSeriesType extends CommonSeriesType<number | null>, Cartesia
    * @returns {string} The formatted label.
    */
   barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label. It accepts the following values:
+   * - 'center': the label is centered on the bar
+   * - 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
+   * @default 'center'
+   */
+  barLabelPlacement?: 'center' | 'outside';
 }
 /**
  * An object that allows to identify a single bar.

package/hooks/animation/useAnimateBarLabel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BarLabelProps } from "../../BarChart/index.js";
-type UseAnimateBarLabelParams = Pick<BarLabelProps, 'xOrigin' | 'yOrigin' | 'x' | 'y' | 'width' | 'height' | 'layout' | 'skipAnimation'> & {
+type UseAnimateBarLabelParams = Pick<BarLabelProps, 'xOrigin' | 'yOrigin' | 'x' | 'y' | 'width' | 'height' | 'layout' | 'skipAnimation' | 'placement'> & {
   ref?: React.Ref<SVGTextElement>;
 };
 type UseAnimateBarLabelReturn = {

package/hooks/animation/useAnimateBarLabel.js

@@ -11,14 +11,12 @@ function barLabelPropsInterpolator(from, to) {
   const interpolateY = (0, _d3Interpolate.interpolateNumber)(from.y, to.y);
   const interpolateWidth = (0, _d3Interpolate.interpolateNumber)(from.width, to.width);
   const interpolateHeight = (0, _d3Interpolate.interpolateNumber)(from.height, to.height);
-  return t => {
-    return {
-      x: interpolateX(t),
-      y: interpolateY(t),
-      width: interpolateWidth(t),
-      height: interpolateHeight(t)
-    };
-  };
+  return t => ({
+    x: interpolateX(t),
+    y: interpolateY(t),
+    width: interpolateWidth(t),
+    height: interpolateHeight(t)
+  });
 }
 
 /**
@@ -31,15 +29,21 @@ function barLabelPropsInterpolator(from, to) {
  * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
  */
 function useAnimateBarLabel(props) {
+  const {
+    initialX,
+    currentX,
+    initialY,
+    currentY
+  } = props.placement === 'outside' ? getOutsidePlacement(props) : getCenterPlacement(props);
   const initialProps = {
-    x: props.layout === 'vertical' ? props.x + props.width / 2 : props.xOrigin,
-    y: props.layout === 'vertical' ? props.yOrigin : props.y + props.height / 2,
+    x: initialX,
+    y: initialY,
     width: props.width,
     height: props.height
   };
   const currentProps = {
-    x: props.x + props.width / 2,
-    y: props.y + props.height / 2,
+    x: currentX,
+    y: currentY,
     width: props.width,
     height: props.height
   };
@@ -56,4 +60,49 @@ function useAnimateBarLabel(props) {
     skip: props.skipAnimation,
     ref: props.ref
   });
+}
+const LABEL_OFFSET = 4;
+function getCenterPlacement(props) {
+  return {
+    initialX: props.layout === 'vertical' ? props.x + props.width / 2 : props.xOrigin,
+    initialY: props.layout === 'vertical' ? props.yOrigin : props.y + props.height / 2,
+    currentX: props.x + props.width / 2,
+    currentY: props.y + props.height / 2
+  };
+}
+function getOutsidePlacement(props) {
+  let initialY = 0;
+  let currentY = 0;
+  let initialX = 0;
+  let currentX = 0;
+  if (props.layout === 'vertical') {
+    const shouldPlaceAbove = props.y < props.yOrigin;
+    if (shouldPlaceAbove) {
+      initialY = props.yOrigin - LABEL_OFFSET;
+      currentY = props.y - LABEL_OFFSET;
+    } else {
+      initialY = props.yOrigin + LABEL_OFFSET;
+      currentY = props.y + props.height + LABEL_OFFSET;
+    }
+    return {
+      initialX: props.x + props.width / 2,
+      currentX: props.x + props.width / 2,
+      initialY,
+      currentY
+    };
+  }
+  const shouldPlaceToTheLeft = props.x < props.xOrigin;
+  if (shouldPlaceToTheLeft) {
+    initialX = props.xOrigin;
+    currentX = props.x - LABEL_OFFSET;
+  } else {
+    initialX = props.xOrigin;
+    currentX = props.x + props.width + LABEL_OFFSET;
+  }
+  return {
+    initialX,
+    currentX,
+    initialY: props.y + props.height / 2,
+    currentY: props.y + props.height / 2
+  };
 }