@fluentui/react-charting 5.24.38 → 5.25.0

package/lib-amd/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-amd/utilities/utilities.js

@@ -101,13 +101,16 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @param {IXAxisParams} xAxisParams
      */
     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 (0, d3_format_1.format)(tickParams.tickFormat)(domainValue);
             }
@@ -246,7 +249,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @param {ITickParams} tickParams
      */
     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 ? (0, d3_scale_1.scaleUtc)() : (0, d3_scale_1.scaleTime)();
         xAxisScale
             .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
@@ -268,6 +271,9 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         var formatOptions = options !== null && options !== void 0 ? options : (0, chart_utilities_1.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);
             }
@@ -323,13 +329,19 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      */
     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 = (0, d3_scale_1.scaleBand)()
             .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,
@@ -358,7 +370,11 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             nonOverlappingTickValues = nonOverlappingTickValues.reverse();
             tickValues = nonOverlappingTickValues;
         }
-        var xAxis = (0, d3_axis_1.axisBottom)(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).tickValues(tickValues);
+        var xAxis = (0, d3_axis_1.axisBottom)(xAxisScale)
+            .tickSize(xAxistickSize)
+            .tickPadding(tickPadding)
+            .tickValues(tickValues)
+            .tickFormat(tickFormat);
         if (xAxisParams.xAxisElement) {
             (0, d3_selection_1.select)(xAxisParams.xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
         }
@@ -426,7 +442,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         return dataPointsArray;
     }
     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;
@@ -436,7 +452,20 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             .range([containerHeight - margins.bottom, margins.top]);
         var axis = isRtl ? (0, d3_axis_1.axisRight)(yAxisScale) : (0, d3_axis_1.axisLeft)(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 (0, d3_format_1.format)(yAxisTickFormat)(domainValue);
+            }
+            var value = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
+            return defaultYAxisTickFormatter(value);
+        };
+        yAxis.tickFormat(tickFormat);
         var customTickValues;
         if (tickValues) {
             customTickValues = tickValues;
@@ -454,7 +483,7 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         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;
@@ -502,12 +531,19 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             }
         }
         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 (0, d3_format_1.format)(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 ? (0, d3_selection_1.select)(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
         return yAxisScale;
     }
@@ -518,7 +554,8 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @param isRtl
      */
     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 = (0, d3_scale_1.scaleBand)()
@@ -526,10 +563,17 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             .range([containerHeight - margins.bottom, margins.top])
             .padding(yAxisPaddingValue);
         var axis = isRtl ? (0, d3_axis_1.axisRight)(yAxisScale) : (0, d3_axis_1.axisLeft)(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 ? (0, d3_selection_1.select)(yAxisElement).call(yAxis).selectAll('text') : '';
         return yAxisScale;
     };
@@ -541,7 +585,8 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @param isRtl
      */
     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 = (0, d3_scale_1.scaleBand)()
             .domain(dataPoints)
             .range([containerHeight - margins.bottom, margins.top])
@@ -550,13 +595,20 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
             yAxisScale.paddingInner(1).paddingOuter(0);
         }
         var axis = isRtl ? (0, d3_axis_1.axisRight)(yAxisScale) : (0, d3_axis_1.axisLeft)(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 ? (0, d3_selection_1.select)(yAxisElement).call(yAxis).selectAll('text') : '';
         return yAxisScale;
     };