@fluentui/react-charting 5.24.38 → 5.25.0

package/lib/utilities/utilities.d.ts

@@ -1,5 +1,5 @@
 import { Axis as D3Axis } from 'd3-axis';
-import { ScaleContinuousNumeric as IScaleContinuousNumeric, ScaleTime as IScaleTime } from 'd3-scale';
+import { ScaleBand, ScaleLinear, ScaleContinuousNumeric as IScaleContinuousNumeric, ScaleTime as IScaleTime } from 'd3-scale';
 import { TimeLocaleDefinition as d3TimeLocaleDefinition } from 'd3-time-format';
 import { IAccessibilityProps, IEventsAnnotationProps, ILineChartPoints, IDataPoint, IVerticalStackedBarDataPoint, IVerticalBarChartDataPoint, IHorizontalBarChartWithAxisDataPoint, ILineChartLineOptions, AxisCategoryOrder, IYValueHover } from '../index';
 import { ITheme } from '@fluentui/react';
@@ -127,7 +127,7 @@ export declare function defaultYAxisTickFormatter(value: number): string;
  * @param {IXAxisParams} xAxisParams
  */
 export declare function createNumericXAxis(xAxisParams: IXAxisParams, tickParams: ITickParams, chartType: ChartTypes, culture?: string, scaleType?: AxisScaleType): {
-    xScale: import("d3-scale").ScaleLinear<number, number, never>;
+    xScale: IScaleContinuousNumeric<number, number>;
     tickValues: string[];
 };
 export declare function getDateFormatLevel(date: Date, useUTC?: boolean): number;
@@ -138,7 +138,7 @@ export declare function getDateFormatLevel(date: Date, useUTC?: boolean): number
  * @param {ITickParams} tickParams
  */
 export declare function createDateXAxis(xAxisParams: IXAxisParams, tickParams: ITickParams, culture?: string, options?: Intl.DateTimeFormatOptions, timeFormatLocale?: d3TimeLocaleDefinition, customDateTimeFormatter?: (dateTime: Date) => string, useUTC?: boolean, chartType?: ChartTypes): {
-    xScale: IScaleTime<number, number, never>;
+    xScale: IScaleTime<number, number>;
     tickValues: string[];
 };
 /**
@@ -151,7 +151,7 @@ export declare function createDateXAxis(xAxisParams: IXAxisParams, tickParams: I
  * @returns
  */
 export declare function createStringXAxis(xAxisParams: IXAxisParams, tickParams: ITickParams, dataset: string[], culture?: string): {
-    xScale: import("d3-scale").ScaleBand<string>;
+    xScale: ScaleBand<string>;
     tickValues: string[];
 };
 /**
@@ -164,22 +164,22 @@ export declare function createStringXAxis(xAxisParams: IXAxisParams, tickParams:
  * @returns {number[]}
  */
 export declare function prepareDatapoints(maxVal: number, minVal: number, splitInto: number, isIntegralDataset: boolean, roundedTicks?: boolean): number[];
-export declare function createYAxisForHorizontalBarChartWithAxis(yAxisParams: IYAxisParams, isRtl: boolean): import("d3-scale").ScaleLinear<number, number, never>;
-export declare function createNumericYAxis(yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean, roundedTicks?: boolean, scaleType?: AxisScaleType): import("d3-scale").ScaleLinear<number, number, never>;
+export declare function createYAxisForHorizontalBarChartWithAxis(yAxisParams: IYAxisParams, isRtl: boolean): ScaleLinear<number, number>;
+export declare function createNumericYAxis(yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean, roundedTicks?: boolean, scaleType?: AxisScaleType): ScaleLinear<number, number, never>;
 /**
  * Creating String Y axis of the chart for Horizontal Bar Chart With Axis
  * @param yAxisParams
  * @param dataPoints
  * @param isRtl
  */
-export declare const createStringYAxisForHorizontalBarChartWithAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth: number) => import("d3-scale").ScaleBand<string>;
+export declare const createStringYAxisForHorizontalBarChartWithAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth: number) => ScaleBand<string>;
 /**
  * Creating String Y axis of the chart for other chart except Horizontal Bar Chart With Axis
  * @param yAxisParams
  * @param dataPoints
  * @param isRtl
  */
-export declare const createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth?: number, chartType?: ChartTypes) => import("d3-scale").ScaleBand<string>;
+export declare const createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth?: number, chartType?: ChartTypes) => ScaleBand<string>;
 /**
  * For area chart and line chart, while displaying stackCallout, Need to form a callout data object.
  * This methos creates an object for those 2 charts.
@@ -262,7 +262,7 @@ export declare const calculateLongestLabelWidth: (labels: (string | number)[], q
  * when prop 'showXAxisLablesTooltip' enables to the respected chart.
  * On hover of the truncated word(at x axis labels tick), a tooltip will be appeared.
  */
-export declare function tooltipOfAxislabels(axistooltipProps: any): null | undefined;
+export declare function tooltipOfAxislabels(axistooltipProps: any): void | null;
 /**
  * Find the axis type of line chart and area chart from given data
  * @param points
@@ -443,10 +443,10 @@ export declare const pointTypes: PointTypes;
  */
 export declare const getAccessibleDataObject: (accessibleData?: IAccessibilityProps, role?: string, isDataFocusable?: boolean) => {
     role: string;
-    'data-is-focusable': boolean;
-    'aria-label': string | undefined;
-    'aria-labelledby': string | undefined;
-    'aria-describedby': string | undefined;
+    "data-is-focusable": boolean;
+    "aria-label": string | undefined;
+    "aria-labelledby": string | undefined;
+    "aria-describedby": string | undefined;
 };
 export declare function rotateXAxisLabels(rotateLabelProps: IRotateLabelProps): number | undefined;
 export declare function wrapTextInsideDonut(selectorClass: string, maxWidth: number): void;
@@ -489,7 +489,7 @@ export declare const getDomainPaddingForMarkers: (minVal: number, maxVal: number
  */
 export declare const isValidDomainValue: (value: any, scaleType?: AxisScaleType) => boolean;
 export declare const isPlottable: (x: any, y: any) => boolean;
-export declare const getScatterXDomainExtent: (points: ILineChartPoints[] | IScatterChartPoints[], scaleType?: AxisScaleType) => (number | Date)[];
+export declare const getScatterXDomainExtent: (points: ILineChartPoints[] | IScatterChartPoints[], scaleType?: AxisScaleType) => [number | Date, number | Date];
 export declare const getRangeForScatterMarkerSize: ({ data, xScale, yScalePrimary, yScaleSecondary, useSecondaryYScale, xScaleType, yScaleType: primaryYScaleType, secondaryYScaleType, }: {
     data: ILineChartPoints[] | IScatterChartPoints[];
     xScale: IScaleContinuousNumeric<number, number> | IScaleTime<number, number>;

package/lib/utilities/utilities.js

@@ -72,13 +72,16 @@ export function defaultYAxisTickFormatter(value) {
  * @param {IXAxisParams} xAxisParams
  */
 export function createNumericXAxis(xAxisParams, tickParams, chartType, culture, scaleType) {
-    var domainNRangeValues = xAxisParams.domainNRangeValues, _a = xAxisParams.showRoundOffXTickValues, showRoundOffXTickValues = _a === void 0 ? true : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, xAxisCount = xAxisParams.xAxisCount, xAxisElement = xAxisParams.xAxisElement, hideTickOverlap = xAxisParams.hideTickOverlap, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth, tickStep = xAxisParams.tickStep, tick0 = xAxisParams.tick0;
+    var domainNRangeValues = xAxisParams.domainNRangeValues, _a = xAxisParams.showRoundOffXTickValues, showRoundOffXTickValues = _a === void 0 ? true : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, xAxisCount = xAxisParams.xAxisCount, xAxisElement = xAxisParams.xAxisElement, hideTickOverlap = xAxisParams.hideTickOverlap, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth, tickStep = xAxisParams.tickStep, tick0 = xAxisParams.tick0, tickText = xAxisParams.tickText;
     var xAxisScale = createNumericScale(scaleType)
         .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
         .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
     showRoundOffXTickValues && xAxisScale.nice();
     var tickCount = xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : 6;
     var tickFormat = function (domainValue, _index, defaultFormat) {
+        if (tickParams.tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
         if (tickParams.tickFormat) {
             return d3Format(tickParams.tickFormat)(domainValue);
         }
@@ -217,7 +220,7 @@ function isPowerOf10(num) {
  * @param {ITickParams} tickParams
  */
 export function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLocale, customDateTimeFormatter, useUTC, chartType) {
-    var domainNRangeValues = xAxisParams.domainNRangeValues, xAxisElement = xAxisParams.xAxisElement, _a = xAxisParams.tickPadding, tickPadding = _a === void 0 ? 6 : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, xAxisCount = xAxisParams.xAxisCount, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth, tickStep = xAxisParams.tickStep, tick0 = xAxisParams.tick0;
+    var domainNRangeValues = xAxisParams.domainNRangeValues, xAxisElement = xAxisParams.xAxisElement, _a = xAxisParams.tickPadding, tickPadding = _a === void 0 ? 6 : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, xAxisCount = xAxisParams.xAxisCount, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth, tickStep = xAxisParams.tickStep, tick0 = xAxisParams.tick0, tickText = xAxisParams.tickText;
     var xAxisScale = useUTC ? d3ScaleUtc() : d3ScaleTime();
     xAxisScale
         .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
@@ -239,6 +242,9 @@ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeF
     var formatOptions = options !== null && options !== void 0 ? options : getMultiLevelDateTimeFormatOptions(lowestFormatLevel, highestFormatLevel);
     var formatFn = getMultiLevelD3DateFormatter(lowestFormatLevel, highestFormatLevel, locale, useUTC);
     var tickFormat = function (domainValue, _index) {
+        if (tickParams.tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
         if (customDateTimeFormatter) {
             return customDateTimeFormatter(domainValue);
         }
@@ -294,13 +300,19 @@ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeF
  */
 export function createStringXAxis(xAxisParams, tickParams, dataset, culture) {
     var _a;
-    var domainNRangeValues = xAxisParams.domainNRangeValues, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, _d = xAxisParams.xAxisPadding, xAxisPadding = _d === void 0 ? 0.1 : _d, xAxisInnerPadding = xAxisParams.xAxisInnerPadding, xAxisOuterPadding = xAxisParams.xAxisOuterPadding, containerWidth = xAxisParams.containerWidth, hideTickOverlap = xAxisParams.hideTickOverlap, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth;
+    var domainNRangeValues = xAxisParams.domainNRangeValues, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.tickPadding, tickPadding = _c === void 0 ? 10 : _c, _d = xAxisParams.xAxisPadding, xAxisPadding = _d === void 0 ? 0.1 : _d, xAxisInnerPadding = xAxisParams.xAxisInnerPadding, xAxisOuterPadding = xAxisParams.xAxisOuterPadding, containerWidth = xAxisParams.containerWidth, hideTickOverlap = xAxisParams.hideTickOverlap, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth, tickText = xAxisParams.tickText;
     var xAxisScale = d3ScaleBand()
         .domain(dataset)
         .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue])
         .paddingInner(typeof xAxisInnerPadding !== 'undefined' ? xAxisInnerPadding : xAxisPadding)
         .paddingOuter(typeof xAxisOuterPadding !== 'undefined' ? xAxisOuterPadding : xAxisPadding);
     var tickValues = (_a = tickParams.tickValues) !== null && _a !== void 0 ? _a : dataset;
+    var tickFormat = function (domainValue, _index) {
+        if (tickParams.tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
+        return domainValue;
+    };
     if (hideTickOverlap) {
         var nonOverlappingTickValues = [];
         // Here, we need the width of each individual label to detect overlaps,
@@ -329,7 +341,11 @@ export function createStringXAxis(xAxisParams, tickParams, dataset, culture) {
         nonOverlappingTickValues = nonOverlappingTickValues.reverse();
         tickValues = nonOverlappingTickValues;
     }
-    var xAxis = d3AxisBottom(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).tickValues(tickValues);
+    var xAxis = d3AxisBottom(xAxisScale)
+        .tickSize(xAxistickSize)
+        .tickPadding(tickPadding)
+        .tickValues(tickValues)
+        .tickFormat(tickFormat);
     if (xAxisParams.xAxisElement) {
         d3Select(xAxisParams.xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
     }
@@ -397,7 +413,7 @@ export function prepareDatapoints(maxVal, minVal, splitInto, isIntegralDataset,
     return dataPointsArray;
 }
 export function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl) {
-    var _a = yAxisParams.yMinMaxValues, yMinMaxValues = _a === void 0 ? { startValue: 0, endValue: 0 } : _a, _b = yAxisParams.yAxisElement, yAxisElement = _b === void 0 ? null : _b, _c = yAxisParams.yMaxValue, yMaxValue = _c === void 0 ? 0 : _c, _d = yAxisParams.yMinValue, yMinValue = _d === void 0 ? 0 : _d, containerHeight = yAxisParams.containerHeight, margins = yAxisParams.margins, _e = yAxisParams.tickPadding, tickPadding = _e === void 0 ? 12 : _e, _f = yAxisParams.maxOfYVal, maxOfYVal = _f === void 0 ? 0 : _f, yAxisTickFormat = yAxisParams.yAxisTickFormat, _g = yAxisParams.yAxisTickCount, yAxisTickCount = _g === void 0 ? 4 : _g, tickValues = yAxisParams.tickValues, tickStep = yAxisParams.tickStep, tick0 = yAxisParams.tick0;
+    var _a = yAxisParams.yMinMaxValues, yMinMaxValues = _a === void 0 ? { startValue: 0, endValue: 0 } : _a, _b = yAxisParams.yAxisElement, yAxisElement = _b === void 0 ? null : _b, _c = yAxisParams.yMaxValue, yMaxValue = _c === void 0 ? 0 : _c, _d = yAxisParams.yMinValue, yMinValue = _d === void 0 ? 0 : _d, containerHeight = yAxisParams.containerHeight, margins = yAxisParams.margins, _e = yAxisParams.tickPadding, tickPadding = _e === void 0 ? 12 : _e, _f = yAxisParams.maxOfYVal, maxOfYVal = _f === void 0 ? 0 : _f, yAxisTickFormat = yAxisParams.yAxisTickFormat, _g = yAxisParams.yAxisTickCount, yAxisTickCount = _g === void 0 ? 4 : _g, tickValues = yAxisParams.tickValues, tickStep = yAxisParams.tickStep, tick0 = yAxisParams.tick0, tickText = yAxisParams.tickText;
     // maxOfYVal coming from horizontal bar chart with axis (Calculation done at base file)
     var tempVal = maxOfYVal || yMinMaxValues.endValue;
     var finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
@@ -407,7 +423,20 @@ export function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl) {
         .range([containerHeight - margins.bottom, margins.top]);
     var axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
     var yAxis = axis.tickPadding(tickPadding).ticks(yAxisTickCount);
-    yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat(defaultYAxisTickFormatter);
+    var tickFormat = function (domainValue, index) {
+        if (tickValues && tickText && typeof tickText[index] !== 'undefined') {
+            return tickText[index];
+        }
+        if (typeof yAxisTickFormat === 'function') {
+            return yAxisTickFormat(domainValue, index);
+        }
+        if (typeof yAxisTickFormat === 'string') {
+            return d3Format(yAxisTickFormat)(domainValue);
+        }
+        var value = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
+        return defaultYAxisTickFormatter(value);
+    };
+    yAxis.tickFormat(tickFormat);
     var customTickValues;
     if (tickValues) {
         customTickValues = tickValues;
@@ -425,7 +454,7 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
     if (useSecondaryYScale === void 0) { useSecondaryYScale = false; }
     if (supportNegativeData === void 0) { supportNegativeData = false; }
     if (roundedTicks === void 0) { roundedTicks = false; }
-    var _a = yAxisParams.yMinMaxValues, yMinMaxValues = _a === void 0 ? { startValue: 0, endValue: 0 } : _a, _b = yAxisParams.yAxisElement, yAxisElement = _b === void 0 ? null : _b, _c = yAxisParams.yMaxValue, yMaxValue = _c === void 0 ? 0 : _c, _d = yAxisParams.yMinValue, yMinValue = _d === void 0 ? 0 : _d, containerHeight = yAxisParams.containerHeight, containerWidth = yAxisParams.containerWidth, margins = yAxisParams.margins, _e = yAxisParams.tickPadding, tickPadding = _e === void 0 ? 12 : _e, _f = yAxisParams.maxOfYVal, maxOfYVal = _f === void 0 ? 0 : _f, yAxisTickFormat = yAxisParams.yAxisTickFormat, _g = yAxisParams.yAxisTickCount, yAxisTickCount = _g === void 0 ? 4 : _g, eventAnnotationProps = yAxisParams.eventAnnotationProps, eventLabelHeight = yAxisParams.eventLabelHeight, tickValues = yAxisParams.tickValues, tickStep = yAxisParams.tickStep, tick0 = yAxisParams.tick0;
+    var _a = yAxisParams.yMinMaxValues, yMinMaxValues = _a === void 0 ? { startValue: 0, endValue: 0 } : _a, _b = yAxisParams.yAxisElement, yAxisElement = _b === void 0 ? null : _b, _c = yAxisParams.yMaxValue, yMaxValue = _c === void 0 ? 0 : _c, _d = yAxisParams.yMinValue, yMinValue = _d === void 0 ? 0 : _d, containerHeight = yAxisParams.containerHeight, containerWidth = yAxisParams.containerWidth, margins = yAxisParams.margins, _e = yAxisParams.tickPadding, tickPadding = _e === void 0 ? 12 : _e, _f = yAxisParams.maxOfYVal, maxOfYVal = _f === void 0 ? 0 : _f, yAxisTickFormat = yAxisParams.yAxisTickFormat, _g = yAxisParams.yAxisTickCount, yAxisTickCount = _g === void 0 ? 4 : _g, eventAnnotationProps = yAxisParams.eventAnnotationProps, eventLabelHeight = yAxisParams.eventLabelHeight, tickValues = yAxisParams.tickValues, tickStep = yAxisParams.tickStep, tick0 = yAxisParams.tick0, tickText = yAxisParams.tickText;
     // maxOfYVal coming from only area chart and Grouped vertical bar chart(Calculation done at base file)
     var tempVal = maxOfYVal || yMinMaxValues.endValue || 0;
     var finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
@@ -473,12 +502,19 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
         }
     }
     var tickFormat = function (domainValue, index, defaultFormat) {
+        if (tickValues && tickText && typeof tickText[index] !== 'undefined') {
+            return tickText[index];
+        }
+        if (typeof yAxisTickFormat === 'function') {
+            return yAxisTickFormat(domainValue, index);
+        }
+        if (typeof yAxisTickFormat === 'string') {
+            return d3Format(yAxisTickFormat)(domainValue);
+        }
         var value = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
         return (defaultFormat === null || defaultFormat === void 0 ? void 0 : defaultFormat(value)) === '' ? '' : defaultYAxisTickFormatter(value);
     };
-    yAxisTickFormat
-        ? yAxis.tickFormat(yAxisTickFormat)
-        : yAxis.tickFormat(function (v, i) { return tickFormat(v, i, yAxisScale.tickFormat(yAxisTickCount)); });
+    yAxis.tickFormat(function (v, i) { return tickFormat(v, i, yAxisScale.tickFormat(yAxisTickCount)); });
     yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
     return yAxisScale;
 }
@@ -489,7 +525,8 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
  * @param isRtl
  */
 export var createStringYAxisForHorizontalBarChartWithAxis = function (yAxisParams, dataPoints, isRtl, barWidth) {
-    var containerHeight = yAxisParams.containerHeight, _a = yAxisParams.tickPadding, tickPadding = _a === void 0 ? 12 : _a, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement, yAxisPadding = yAxisParams.yAxisPadding;
+    var _a;
+    var containerHeight = yAxisParams.containerHeight, _b = yAxisParams.tickPadding, tickPadding = _b === void 0 ? 12 : _b, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement, yAxisPadding = yAxisParams.yAxisPadding, tickValues = yAxisParams.tickValues, tickText = yAxisParams.tickText;
     var yAxisPaddingValue = yAxisPadding !== null && yAxisPadding !== void 0 ? yAxisPadding : 0.5;
     yAxisPaddingValue = yAxisPaddingValue === 1 ? 0.99 : yAxisPaddingValue;
     var yAxisScale = d3ScaleBand()
@@ -497,10 +534,17 @@ export var createStringYAxisForHorizontalBarChartWithAxis = function (yAxisParam
         .range([containerHeight - margins.bottom, margins.top])
         .padding(yAxisPaddingValue);
     var axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
-    var yAxis = axis.tickPadding(tickPadding).ticks(dataPoints);
-    if (yAxisTickFormat) {
-        yAxis.tickFormat(yAxisTickFormat);
-    }
+    var customTickValues = (_a = tickValues) !== null && _a !== void 0 ? _a : dataPoints;
+    var tickFormat = function (domainValue, _index) {
+        if (tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
+        if (typeof yAxisTickFormat === 'function') {
+            return yAxisTickFormat(domainValue, _index);
+        }
+        return domainValue;
+    };
+    var yAxis = axis.tickPadding(tickPadding).tickValues(customTickValues).tickFormat(tickFormat);
     yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text') : '';
     return yAxisScale;
 };
@@ -511,7 +555,8 @@ export var createStringYAxisForHorizontalBarChartWithAxis = function (yAxisParam
  * @param isRtl
  */
 export var createStringYAxis = function (yAxisParams, dataPoints, isRtl, barWidth, chartType) {
-    var containerHeight = yAxisParams.containerHeight, _a = yAxisParams.tickPadding, tickPadding = _a === void 0 ? 12 : _a, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement, _b = yAxisParams.yAxisPadding, yAxisPadding = _b === void 0 ? 0 : _b, containerWidth = yAxisParams.containerWidth;
+    var _a;
+    var containerHeight = yAxisParams.containerHeight, _b = yAxisParams.tickPadding, tickPadding = _b === void 0 ? 12 : _b, margins = yAxisParams.margins, yAxisTickFormat = yAxisParams.yAxisTickFormat, yAxisElement = yAxisParams.yAxisElement, _c = yAxisParams.yAxisPadding, yAxisPadding = _c === void 0 ? 0 : _c, containerWidth = yAxisParams.containerWidth, tickValues = yAxisParams.tickValues, tickText = yAxisParams.tickText;
     var yAxisScale = d3ScaleBand()
         .domain(dataPoints)
         .range([containerHeight - margins.bottom, margins.top])
@@ -520,13 +565,20 @@ export var createStringYAxis = function (yAxisParams, dataPoints, isRtl, barWidt
         yAxisScale.paddingInner(1).paddingOuter(0);
     }
     var axis = isRtl ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
-    var yAxis = axis.tickPadding(tickPadding).tickValues(dataPoints).tickSize(0);
+    var customTickValues = (_a = tickValues) !== null && _a !== void 0 ? _a : dataPoints;
+    var tickFormat = function (domainValue, _index) {
+        if (tickValues && tickText && typeof tickText[_index] !== 'undefined') {
+            return tickText[_index];
+        }
+        if (typeof yAxisTickFormat === 'function') {
+            return yAxisTickFormat(domainValue, _index);
+        }
+        return domainValue;
+    };
+    var yAxis = axis.tickPadding(tickPadding).tickValues(customTickValues).tickFormat(tickFormat).tickSize(0);
     if (chartType === ChartTypes.VerticalStackedBarChart) {
         axis.tickSizeInner(-(containerWidth - margins.left - margins.right));
     }
-    if (yAxisTickFormat) {
-        yAxis.tickFormat(yAxisTickFormat);
-    }
     yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text') : '';
     return yAxisScale;
 };