@oanda/labs-crowd-view-widget 1.0.55 → 1.0.57

package/src/CrowdViewWidget/components/Chart/chartOptions/getLabelsConfig.ts

@@ -40,8 +40,12 @@ export const getLabelsConfig = ({
   const priceVerticalOffset = priceEstimatedWidth / 2;
 
   const topMargin = isDesktop
-    ? CHART_CONFIG.TOP_MARGIN_DESKTOP
-    : CHART_CONFIG.TOP_MARGIN_MOBILE;
+    ? CHART_CONFIG.TOP_LABEL_SPACE_DESKTOP + CHART_CONFIG.TOOLTIP_HEIGHT_DESKTOP
+    : CHART_CONFIG.TOP_LABEL_SPACE_MOBILE + CHART_CONFIG.TOOLTIP_HEIGHT_MOBILE;
+
+  const mainHeight = isDesktop
+    ? CHART_CONFIG.MAIN_HEIGHT_DESKTOP
+    : CHART_CONFIG.MAIN_HEIGHT_MOBILE;
 
   return [
     {
@@ -87,7 +91,7 @@ export const getLabelsConfig = ({
     {
       type: 'group',
       left: `${ySentimentLabelSize + 5}px'`,
-      top: `${CHART_CONFIG.MAIN_HEIGHT - 24 - 5}px`,
+      top: `${topMargin + mainHeight - 24 - 5}px`,
       silent: true,
       children: [
         {
@@ -131,8 +135,8 @@ export const getLabelsConfig = ({
       rotation: isDesktop ? Math.PI / 2 : 0,
       left: `5px`,
       top: isDesktop
-        ? `${topMargin + CHART_CONFIG.MAIN_HEIGHT / 2 - sentimentVerticalOffset}px`
-        : `${topMargin - 18}px`,
+        ? `${topMargin + mainHeight / 2 - sentimentVerticalOffset}px`
+        : `${topMargin - 16}px`,
       silent: true,
       style: {
         fontSize: 10,
@@ -148,8 +152,8 @@ export const getLabelsConfig = ({
       rotation: isDesktop ? -Math.PI / 2 : 0,
       right: `5px`,
       top: isDesktop
-        ? `${topMargin + CHART_CONFIG.MAIN_HEIGHT / 2 - priceVerticalOffset}px`
-        : `${topMargin - 18}px`,
+        ? `${topMargin + mainHeight / 2 - priceVerticalOffset}px`
+        : `${topMargin - 16}px`,
       silent: true,
       style: {
         fontSize: 10,
@@ -163,10 +167,10 @@ export const getLabelsConfig = ({
       type: 'rect',
       z: 20,
       right: '0px',
-      top: '0px',
+      top: `${topMargin}px`,
       shape: {
         width: yMainLabelSize,
-        height: CHART_CONFIG.MAIN_HEIGHT,
+        height: mainHeight,
       },
       silent: true,
       style: {
@@ -177,15 +181,31 @@ export const getLabelsConfig = ({
       type: 'rect',
       z: 20,
       left: '0px',
-      top: '0px',
+      top: `${topMargin}px`,
       shape: {
         width: ySentimentLabelSize,
-        height: CHART_CONFIG.MAIN_HEIGHT,
+        height: mainHeight,
       },
       silent: true,
       style: {
         fill: backgroundColor,
       },
     },
+    {
+      type: 'text',
+      z: 20,
+      left: 'center',
+      top: isDesktop
+        ? CHART_CONFIG.TOOLTIP_HEIGHT_DESKTOP / 2 - 5
+        : CHART_CONFIG.TOOLTIP_HEIGHT_MOBILE / 2 - 5,
+      silent: true,
+      style: {
+        fontSize: isDesktop ? 12 : 11,
+        fill: textColor,
+        text: isDesktop
+          ? labelCallback('hover_chart_to_see_more_details')
+          : labelCallback('tap_chart_to_see_more_details'),
+      },
+    },
   ];
 };

package/src/CrowdViewWidget/components/Chart/chartOptions/getTooltipConfig.ts

@@ -1,7 +1,6 @@
 import type { TooltipComponentOption } from 'echarts';
 
 import type { BookType } from '../../../../gql/types/graphql';
-import { CHART_CONFIG } from '../../../constants';
 import { getTooltipFormatter } from '../chartUtils';
 import type { Bucket, TooltipParam } from '../types';
 
@@ -9,25 +8,42 @@ interface GetTooltipConfigParams {
   bookType: BookType;
   bucketWidth: number;
   buckets: Bucket[][];
-  displayPrecision: number;
   labelCallback: (key: string, params?: Record<string, unknown>) => string;
   selectedPriceRef: { current: number };
   tooltipLinesColor: string;
   sentimentLongs: (number | null)[];
   sentimentShorts: (number | null)[];
+  isDesktop: boolean;
+  isDark: boolean;
+  locale: string;
 }
 
 export const getTooltipConfig = ({
   bookType,
   bucketWidth,
   buckets,
-  displayPrecision,
   labelCallback,
   selectedPriceRef,
   tooltipLinesColor,
   sentimentLongs,
   sentimentShorts,
+  isDesktop,
+  isDark,
+  locale,
 }: GetTooltipConfigParams): TooltipComponentOption => ({
+  backgroundColor: 'transparent',
+  shadowColor: 'transparent',
+  extraCssText: 'width: 100%; z-index: 5;',
+  padding: 4,
+  textStyle: isDesktop
+    ? {
+        fontSize: 12,
+      }
+    : {
+        fontSize: 10,
+        lineHeight: 12,
+      },
+  alwaysShowContent: true,
   trigger: 'axis' as const,
   formatter: (params) =>
     getTooltipFormatter({
@@ -39,6 +55,9 @@ export const getTooltipConfig = ({
       selectedPrice: selectedPriceRef.current,
       sentimentLongs,
       sentimentShorts,
+      isDesktop,
+      locale,
+      isDark,
     }),
   hideDelay: 0,
   axisPointer: {
@@ -50,25 +69,8 @@ export const getTooltipConfig = ({
     crossStyle: {
       color: tooltipLinesColor,
     },
-    label: {
-      padding: 0,
-      lineHeight: 24,
-      formatter: (params: {
-        axisDimension?: string;
-        axisIndex?: number;
-        value: unknown;
-      }) => {
-        if (params.axisDimension === 'y' && params.axisIndex === 0) {
-          selectedPriceRef.current = Number(params.value);
-          return ` ${Number(params.value).toFixed(displayPrecision)} `;
-        }
-        return '';
-      },
-    },
+    z: 30,
   },
   confine: true,
-  position: (point) => [
-    point[0] + CHART_CONFIG.TOOLTIP_OFFSET,
-    point[1] + CHART_CONFIG.TOOLTIP_OFFSET,
-  ],
+  position: [0, 0],
 });

package/src/CrowdViewWidget/components/Chart/chartOptions/getXAxisConfig.ts

@@ -1,6 +1,7 @@
 import type { XAXisComponentOption } from 'echarts';
 
 import {
+  formatFullDate,
   formatXAxisAdditionalLabel,
   formatXAxisLabel,
   getLabelData,
@@ -9,11 +10,15 @@ import {
 interface GetXAxisConfigParams {
   dates: string[];
   isGreaterThanTwoWeeks: boolean;
+  locale: string;
+  isDesktop: boolean;
 }
 
 export const getXAxisConfig = ({
   dates,
   isGreaterThanTwoWeeks,
+  locale,
+  isDesktop,
 }: GetXAxisConfigParams): XAXisComponentOption[] => {
   const labelsData = getLabelData({
     dates,
@@ -24,22 +29,44 @@ export const getXAxisConfig = ({
     {
       type: 'category',
       id: 'main-xAxis',
-      name: isGreaterThanTwoWeeks
-        ? 'xAxis-greater-than-two-weeks'
-        : 'xAxis-less-than-two-weeks',
       nameTextStyle: {
         fontSize: 0,
       },
       axisTick: {
         show: false,
       },
+      splitLine: {
+        lineStyle: {
+          opacity: 0.5,
+        },
+      },
       axisLabel: {
         padding: [8, 16, 8, 16],
         margin: 0,
         formatter: (value: unknown) =>
-          formatXAxisLabel(value, isGreaterThanTwoWeeks),
+          value === dates[dates.length - 1]
+            ? ''
+            : formatXAxisLabel(value, isGreaterThanTwoWeeks, locale),
       },
       boundaryGap: false,
+      z: 2,
+      axisPointer: {
+        label: {
+          lineHeight: 22,
+          margin: -22,
+          padding: [0, 8, 0, 8],
+          formatter: (params: {
+            axisDimension?: string;
+            axisIndex?: number;
+            value: unknown;
+          }) => {
+            const date = new Date(params.value as string);
+
+            return isDesktop ? formatFullDate(date, locale) : '';
+          },
+        },
+        z: 100,
+      },
     },
     {
       type: 'category',
@@ -59,10 +86,14 @@ export const getXAxisConfig = ({
         hideOverlap: true,
         customValues: labelsData,
         formatter: (value: unknown) =>
-          formatXAxisAdditionalLabel(value, isGreaterThanTwoWeeks),
+          formatXAxisAdditionalLabel(value, isGreaterThanTwoWeeks, locale),
+      },
+      axisPointer: {
+        show: false,
       },
       data: dates,
       boundaryGap: false,
+      z: 2,
     },
   ];
 };

package/src/CrowdViewWidget/components/Chart/chartOptions/getYAxisConfig.ts

@@ -1,24 +1,30 @@
 import type { YAXisComponentOption } from 'echarts';
 
-import { BUCKET_CONFIG, CHART_CONFIG } from '../../../constants';
+import { CHART_CONFIG } from '../../../constants';
 
 interface GetYAxisConfigParams {
   bucketWidth: number;
   displayPrecision: number;
+  selectedPriceRef: { current: number };
 }
 
 export const getYAxisConfig = ({
   bucketWidth,
   displayPrecision,
+  selectedPriceRef,
 }: GetYAxisConfigParams): YAXisComponentOption[] => [
   {
     type: 'value',
     gridIndex: 0,
     position: 'right',
-    min: (val: { min: number }) =>
-      val.min - bucketWidth * BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
-    max: (val: { max: number }) =>
-      val.max + bucketWidth * BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
+    min: (val: { min: number }) => {
+      const adjustedMin = val.min - bucketWidth;
+      return Math.floor(adjustedMin / bucketWidth) * bucketWidth;
+    },
+    max: (val: { max: number }) => {
+      const adjustedMax = val.max + bucketWidth;
+      return Math.ceil(adjustedMax / bucketWidth) * bucketWidth;
+    },
     axisLine: { show: false },
     axisTick: { show: false },
     splitLine: { show: false },
@@ -29,6 +35,23 @@ export const getYAxisConfig = ({
       verticalAlignMaxLabel: 'top',
       formatter: (value: number) => value.toFixed(displayPrecision),
     },
+    axisPointer: {
+      label: {
+        padding: [4, 4, 4, 4],
+        margin: -1,
+        formatter: (params: {
+          axisDimension?: string;
+          axisIndex?: number;
+          value: unknown;
+        }) => {
+          if (params.axisDimension === 'y' && params.axisIndex === 0) {
+            selectedPriceRef.current = Number(params.value);
+            return Number(params.value).toFixed(displayPrecision);
+          }
+          return '';
+        },
+      },
+    },
     z: 30,
   },
   {
@@ -45,7 +68,7 @@ export const getYAxisConfig = ({
       margin: 4,
       lineHeight: 20,
       verticalAlignMinLabel: 'bottom',
-      verticalAlignMaxLabel: 'middle',
+      verticalAlignMaxLabel: 'top',
       customValues: [
         CHART_CONFIG.SENTIMENT_MIN,
         CHART_CONFIG.SENTIMENT_MAX / 5,

package/src/CrowdViewWidget/components/Chart/chartUtils/formatFullDate.ts

@@ -0,0 +1,26 @@
+export const formatFullDate = (date: Date, locale: string): string => {
+  const formattedDate = date
+    .toLocaleDateString(locale, {
+      day: 'numeric',
+      month: '2-digit',
+      year: '2-digit',
+    })
+    .replace(/\//g, '.');
+
+  const formattedTime = date.toLocaleTimeString(locale, {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: false,
+  });
+
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    timeZoneName: 'shortOffset',
+  });
+
+  const parts = formatter.formatToParts(date);
+  const timeZoneOffset = parts.find(
+    (part) => part.type === 'timeZoneName'
+  )?.value;
+
+  return `${formattedDate} ${formattedTime} ${timeZoneOffset}`;
+};

package/src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisAdditionalLabel.ts

@@ -1,12 +1,13 @@
 export const formatXAxisAdditionalLabel = (
   value: unknown,
-  isGreaterThanTwoWeeks: boolean
+  isGreaterThanTwoWeeks: boolean,
+  locale: string
 ) => {
   const date = new Date(value as string);
   if (isNaN(date.getTime())) {
     return '';
   }
-  return `${date.toLocaleDateString(undefined, {
+  return `${date.toLocaleDateString(locale, {
     month: isGreaterThanTwoWeeks ? 'short' : 'long',
     day: isGreaterThanTwoWeeks ? 'numeric' : undefined,
   })}`;

package/src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisLabel.ts

@@ -2,15 +2,17 @@ import { CHART_CONFIG } from '../../../constants';
 
 export const formatXAxisLabel = (
   value: unknown,
-  isGreaterThanTwoWeeks: boolean
+  isGreaterThanTwoWeeks: boolean,
+  locale: string
 ) => {
   const date = new Date(value as string);
   return isGreaterThanTwoWeeks
-    ? `${date.toLocaleTimeString(undefined, {
-        hour: '2-digit',
+    ? `${date.toLocaleTimeString(locale, {
+        hour: 'numeric',
         minute: '2-digit',
+        hour12: false,
       })}`
-    : `${CHART_CONFIG.X_AXIS_DATE_PADDING}${date.toLocaleDateString(undefined, {
+    : `${CHART_CONFIG.X_AXIS_DATE_PADDING}${date.toLocaleDateString(locale, {
         day: 'numeric',
       })}${CHART_CONFIG.X_AXIS_DATE_PADDING}`;
 };

package/src/CrowdViewWidget/components/Chart/chartUtils/getTooltipFormatter.ts

@@ -1,17 +1,17 @@
+import { colorPalette } from '@oanda/labs-widget-common';
+
 import { BookType } from '../../../../gql/types/graphql';
 import type { Bucket, TooltipParam } from '../types';
-
-const DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {
-  hour: '2-digit',
-  minute: '2-digit',
-  year: 'numeric',
-  day: 'numeric',
-  month: 'numeric',
-  timeZoneName: 'short',
-};
+import { formatFullDate } from './formatFullDate';
 
 const SENTIMENT_DISPLAY_PRECISION = 2;
 
+const TOOLTIP_STYLES = {
+  MOBILE_COLUMN_WIDTH: '33.3%',
+  PADDING_BOTTOM: '4px',
+  FULL_WIDTH: '100%',
+} as const;
+
 const calculateBucketDisplayPrecision = (bucketWidth: number): number => {
   return bucketWidth.toString().split('.')[1]?.length || 0;
 };
@@ -56,15 +56,29 @@ const getSentimentOverbalanceLabel = (
 
 const formatCandleData = (
   candleData: [number, number, number, number, number],
-  labelCallback: (key: string) => string
+  labelCallback: (key: string) => string,
+  isDesktop: boolean
 ): string => {
   const [, open, close, low, high] = candleData;
-  return `<p><b>${labelCallback('candle')}:</b></p>
-<p>${labelCallback('open_price')}: ${open} </p>
-<p>${labelCallback('close_price')}: ${close} </p>
-<p>${labelCallback('low')}: ${low} </p>
-<p>${labelCallback('high')}: ${high} </p>
-`;
+  const candleLabel = labelCallback('candle');
+  const openLabel = labelCallback('open');
+  const closeLabel = labelCallback('close');
+  const lowLabel = labelCallback('low');
+  const highLabel = labelCallback('high');
+
+  return isDesktop
+    ? `<div><b>${candleLabel}:</b></div>
+<div style="display: flex; gap: 4px; margin-right: 4px;">
+<div>${openLabel}: ${open} </div>
+<div>${closeLabel}: ${close} </div>
+<div>${lowLabel}: ${low} </div>
+<div>${highLabel}: ${high} </div>
+</div>`
+    : `<div><b>${candleLabel}:</b></div>
+<div>${openLabel}: ${open} </div>
+<div>${closeLabel}: ${close} </div>
+<div>${lowLabel}: ${low} </div>
+<div>${highLabel}: ${high} </div>`;
 };
 
 const formatBookData = ({
@@ -73,14 +87,16 @@ const formatBookData = ({
   bucketDisplayPrecision,
   bookType,
   labelCallback,
+  isDesktop,
 }: {
   matchedBucket: Bucket;
   bucketWidth: number;
   bucketDisplayPrecision: number;
   bookType: BookType;
   labelCallback: (key: string) => string;
+  isDesktop: boolean;
 }): string => {
-  const bookLabelKey = bookType === BookType.Order ? 'orders' : 'positions';
+  const bookLabelKey = bookType === BookType.Order ? 'orders' : 'trades';
   const priceRangeStart = matchedBucket.price.toFixed(bucketDisplayPrecision);
   const priceRangeEnd = (matchedBucket.price + bucketWidth).toFixed(
     bucketDisplayPrecision
@@ -89,23 +105,32 @@ const formatBookData = ({
     matchedBucket.sentiment,
     bookType
   );
-  const sentimentValue = Math.abs(matchedBucket.sentiment).toFixed(
-    bucketDisplayPrecision
-  );
+  const sentimentValue = Math.abs(matchedBucket.sentiment);
 
-  return `<br /><p><b>${labelCallback(bookLabelKey)}:</b></p>
-<p>${labelCallback('price_range')}: ${priceRangeStart} - ${priceRangeEnd} </p>
-<p>${labelCallback(sentimentLabel)}: ${sentimentValue}% </p>`;
+  return isDesktop
+    ? `<div><b>${labelCallback(bookLabelKey)}:</b></div>
+<span style="margin-right: 4px;">${labelCallback('price_range')}: ${priceRangeStart} - ${priceRangeEnd} </span>
+<span style="margin-right: 4px;">${labelCallback(sentimentLabel)}: ${sentimentValue}% </span>`
+    : `<div><b>${labelCallback(bookLabelKey)}:</b></div>
+<div>${labelCallback('price_range')}:</div>
+<div>${priceRangeStart} - ${priceRangeEnd} </div>
+<div>${labelCallback(sentimentLabel)}:</div>
+<div>${sentimentValue}% </div>`;
 };
 
 const formatSentimentData = (
   sentimentLong: number,
   sentimentShort: number,
-  labelCallback: (key: string) => string
+  labelCallback: (key: string) => string,
+  isDesktop: boolean
 ): string => {
-  return `<br /><p><b>${labelCallback('sentiment')}:</b></p>
-<p>${labelCallback('long')}: ${sentimentLong.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </p>
-<p>${labelCallback('short')}: ${sentimentShort.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </p>`;
+  return isDesktop
+    ? `<div><b>${labelCallback('sentiment')}:</b></div>
+  <span style="margin-right: 4px;">${labelCallback('long')}: ${sentimentLong.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </span>
+  <span style="margin-right: 4px;">${labelCallback('short')}: ${sentimentShort.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </span>`
+    : `<div><b>${labelCallback('sentiment')}:</b></div>
+<div>${labelCallback('long')}: ${sentimentLong.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </div>
+<div>${labelCallback('short')}: ${sentimentShort.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </div>`;
 };
 
 const hasValidCandleData = (
@@ -142,6 +167,9 @@ export const getTooltipFormatter = ({
   labelCallback,
   sentimentLongs,
   sentimentShorts,
+  isDesktop,
+  locale,
+  isDark,
 }: {
   params: TooltipParam[];
   buckets: Bucket[][];
@@ -151,6 +179,9 @@ export const getTooltipFormatter = ({
   labelCallback: (key: string) => string;
   sentimentLongs: (number | null)[];
   sentimentShorts: (number | null)[];
+  isDesktop: boolean;
+  locale: string;
+  isDark: boolean;
 }) => {
   if (!params || !Array.isArray(params) || params.length === 0) {
     return '';
@@ -185,9 +216,9 @@ export const getTooltipFormatter = ({
     return '';
   }
 
-  const timeFormatted = time.toLocaleString(undefined, DATE_FORMAT_OPTIONS);
+  const timeFormatted = formatFullDate(time, locale);
   const candleSection = showCandles
-    ? formatCandleData(candleData, labelCallback)
+    ? formatCandleData(candleData, labelCallback, isDesktop)
     : '';
 
   const bookSection = matchedBucket
@@ -197,16 +228,96 @@ export const getTooltipFormatter = ({
         bucketDisplayPrecision,
         bookType,
         labelCallback,
+        isDesktop,
       })
     : '';
 
   const sentimentSection =
     showSentiment && sentimentLong && sentimentShort
-      ? formatSentimentData(sentimentLong, sentimentShort, labelCallback)
+      ? formatSentimentData(
+          sentimentLong,
+          sentimentShort,
+          labelCallback,
+          isDesktop
+        )
       : '';
 
-  return `<p>${timeFormatted}</p><br />
+  if (isDesktop) {
+    return buildDesktopTooltip({
+      timeFormatted,
+      candleSection,
+      sentimentSection,
+      bookSection,
+      isDark,
+    });
+  }
+
+  return buildMobileTooltip({
+    timeFormatted,
+    candleSection,
+    sentimentSection,
+    bookSection,
+    isDark,
+  });
+};
+
+interface TooltipSections {
+  timeFormatted: string;
+  candleSection: string;
+  sentimentSection: string;
+  bookSection: string;
+}
+
+const buildDesktopTooltip = ({
+  candleSection,
+  sentimentSection,
+  bookSection,
+  isDark,
+}: TooltipSections & {
+  isDark: boolean;
+}): string => {
+  const backgroundColor = isDark ? colorPalette.black : colorPalette.white;
+  const fullWidth = TOOLTIP_STYLES.FULL_WIDTH;
+
+  return `<div style="width: ${fullWidth}; background-color: ${backgroundColor};">
+  <div style="width: ${fullWidth}; display: flex; justify-content: space-between;">
+ <div style="width: 40%;">
+${candleSection}
+</div>
+<div style="width: 22%;">
+${sentimentSection}
+</div>
+<div style="width: 38%;">
+${bookSection}
+</div>
+</div>
+</div>`;
+};
+
+const buildMobileTooltip = ({
+  timeFormatted,
+  candleSection,
+  sentimentSection,
+  bookSection,
+  isDark,
+}: TooltipSections & { isDark: boolean }): string => {
+  const backgroundColor = isDark ? colorPalette.black : colorPalette.white;
+  const columnWidth = TOOLTIP_STYLES.MOBILE_COLUMN_WIDTH;
+  const fullWidth = TOOLTIP_STYLES.FULL_WIDTH;
+  const padding = TOOLTIP_STYLES.PADDING_BOTTOM;
+
+  return `<div style="width: ${fullWidth}; background-color: ${backgroundColor};">
+  <div style="padding-bottom: ${padding};">${timeFormatted}</div>
+  <div style="width: ${fullWidth}; display: flex; justify-content: space-between;">
+  <div style="width: ${columnWidth};">
 ${candleSection}
+</div>
+<div style="width: ${columnWidth};">
+${sentimentSection}
+</div>
+<div style="width: ${columnWidth};">
 ${bookSection}
-${sentimentSection}`;
+</div>
+</div>
+</div>`;
 };

package/src/CrowdViewWidget/components/Chart/chartUtils/handleLabelUpdate.ts

@@ -11,7 +11,8 @@ export const handleLabelUpdate = (
   instance: EChartsType,
   mainData: ChartProps['mainData'],
   labelTimerRef: MutableRefObject<NodeJS.Timeout | null>,
-  isGreaterThanTwoWeeksRef: MutableRefObject<boolean | null>
+  isGreaterThanTwoWeeksRef: MutableRefObject<boolean | null>,
+  locale: string
 ): void => {
   if (labelTimerRef.current) {
     clearTimeout(labelTimerRef.current);
@@ -55,7 +56,7 @@ export const handleLabelUpdate = (
             id: 'main-xAxis',
             axisLabel: {
               formatter: (value: string) =>
-                formatXAxisLabel(value, isGreaterThanTwoWeeks),
+                formatXAxisLabel(value, isGreaterThanTwoWeeks, locale),
             },
           },
           {
@@ -63,7 +64,11 @@ export const handleLabelUpdate = (
             axisLabel: {
               customValues: labelsData,
               formatter: (value: unknown) =>
-                formatXAxisAdditionalLabel(value, isGreaterThanTwoWeeks),
+                formatXAxisAdditionalLabel(
+                  value,
+                  isGreaterThanTwoWeeks,
+                  locale
+                ),
             },
           },
         ],