refactor(chart-core): axis configuration logic

Author: jsilll

src/core/chart-core.tsx

@@ -119,26 +119,37 @@ export function InternalCoreChart({
 
   const apiOptions = api.getOptions();
   const inverted = !!options.chart?.inverted;
-  const isRtl = () => getIsRtl(rootRef?.current);
+  const isRtl = getIsRtl(rootRef?.current);
 
   // Compute RTL-adjusted options that will be used for both legend positioning and chart rendering
-  const rtlAdjustedOptions: CoreChartProps.ChartOptions = {
+  const rtlAdjustedOptions: Highcharts.Options = {
     ...options,
     xAxis: castArray(options.xAxis)?.map((xAxisOptions) => ({
+      ...Styles.xAxisOptions,
       ...xAxisOptions,
       // Depending on the chart.inverted the x-axis can be rendered as vertical, and needs to respect page direction.
-      reversed: !inverted && isRtl() ? !xAxisOptions.reversed : xAxisOptions.reversed,
-      opposite: inverted && isRtl() ? !xAxisOptions.opposite : xAxisOptions.opposite,
+      reversed: !inverted && isRtl ? !xAxisOptions.reversed : xAxisOptions.reversed,
+      opposite: inverted && isRtl ? !xAxisOptions.opposite : xAxisOptions.opposite,
+      className: xAxisClassName(inverted, xAxisOptions.className),
+      title: axisTitle(xAxisOptions.title ?? {}, !inverted || verticalAxisTitlePlacement === "side"),
+      labels: axisLabels(xAxisOptions.labels ?? {}),
     })),
     yAxis: castArray(options.yAxis)?.map((yAxisOptions) => ({
+      ...Styles.yAxisOptions,
       ...yAxisOptions,
       // Depending on the chart.inverted the y-axis can be rendered as vertical, and needs to respect page direction.
-      reversed: inverted && isRtl() ? !yAxisOptions.reversed : yAxisOptions.reversed,
-      opposite: !inverted && isRtl() ? !yAxisOptions.opposite : yAxisOptions.opposite,
+      reversed: inverted && isRtl ? !yAxisOptions.reversed : yAxisOptions.reversed,
+      opposite: !inverted && isRtl ? !yAxisOptions.opposite : yAxisOptions.opposite,
+      className: yAxisClassName(inverted, yAxisOptions.className),
+      title: axisTitle(yAxisOptions.title ?? {}, inverted || verticalAxisTitlePlacement === "side"),
+      labels: axisLabels(yAxisOptions.labels ?? {}),
+      plotLines: yAxisPlotLines(yAxisOptions.plotLines, emphasizeBaseline),
+      // We use reversed stack by default so that the order of points in the tooltip and series in the legend
+      // correspond the order of stacks.
+      reversedStacks: yAxisOptions.reversedStacks ?? true,
     })),
   };
 
-  // Get legend props using RTL-adjusted options so that legend positioning respects axis flipping
   const legendProps = getLegendsProps(rtlAdjustedOptions, legendOptions);
 
   return (
@@ -285,24 +296,8 @@ export function InternalCoreChart({
                 dataLabels: { ...Styles.pieSeriesDataLabels, ...options.plotOptions?.pie?.dataLabels },
               },
             },
-            xAxis: castArray(rtlAdjustedOptions.xAxis)?.map((xAxisOptions) => ({
-              ...Styles.xAxisOptions,
-              ...xAxisOptions,
-              className: xAxisClassName(inverted, xAxisOptions.className),
-              title: axisTitle(xAxisOptions.title ?? {}, !inverted || verticalAxisTitlePlacement === "side"),
-              labels: axisLabels(xAxisOptions.labels ?? {}),
-            })),
-            yAxis: castArray(rtlAdjustedOptions.yAxis)?.map((yAxisOptions) => ({
-              ...Styles.yAxisOptions,
-              ...yAxisOptions,
-              className: yAxisClassName(inverted, yAxisOptions.className),
-              title: axisTitle(yAxisOptions.title ?? {}, inverted || verticalAxisTitlePlacement === "side"),
-              labels: axisLabels(yAxisOptions.labels ?? {}),
-              plotLines: yAxisPlotLines(yAxisOptions.plotLines, emphasizeBaseline),
-              // We use reversed stack by default so that the order of points in the tooltip and series in the legend
-              // correspond the order of stacks.
-              reversedStacks: yAxisOptions.reversedStacks ?? true,
-            })),
+            xAxis: rtlAdjustedOptions.xAxis,
+            yAxis: rtlAdjustedOptions.yAxis,
             // We don't use Highcharts tooltip, but certain tooltip options such as tooltip.snap or tooltip.shared
             // affect the hovering behavior of Highcharts. That is only the case when the tooltip is not disabled,
             // so we render it, but hide with styles.