@fluentui/react-charts 9.2.2 → 9.2.4

package/lib-commonjs/components/ChartTable/ChartTable.js

@@ -13,6 +13,33 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useChartTableStylesstyles = require("./useChartTableStyles.styles");
 const _utilities = require("../../utilities/utilities");
 const _imageexportutils = require("../../utilities/image-export-utils");
+const _reacttheme = require("@fluentui/react-theme");
+const _d3color = /*#__PURE__*/ _interop_require_wildcard._(require("d3-color"));
+const _colors = require("../../utilities/colors");
+function invertHexColor(hex) {
+    const color = _d3color.color(hex);
+    if (!color) {
+        return _reacttheme.tokens.colorNeutralForeground1;
+    }
+    const rgb = color.rgb();
+    return _d3color.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();
+}
+function getSafeBackgroundColor(foreground, background) {
+    const fallbackFg = _reacttheme.tokens.colorNeutralForeground1;
+    const fallbackBg = _reacttheme.tokens.colorNeutralBackground1;
+    const fg = _d3color.color(foreground || fallbackFg);
+    const bg = _d3color.color(background || fallbackBg);
+    if (!fg || !bg) {
+        return fallbackBg;
+    }
+    const contrast = (0, _colors.getColorContrast)(fg.formatHex(), bg.formatHex());
+    if (contrast >= 3) {
+        return bg.formatHex();
+    }
+    const invertedBg = invertHexColor(bg.formatHex());
+    const invertedContrast = (0, _colors.getColorContrast)(fg.formatHex(), invertedBg);
+    return invertedContrast >= 3 ? invertedBg : fallbackBg;
+}
 const ChartTable = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     const { headers, rows, width, height } = props;
     const _isRTL = (0, _utilities.useRtl)();
@@ -27,6 +54,38 @@ const ChartTable = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     if (!headers || headers.length === 0) {
         return /*#__PURE__*/ _react.createElement("div", null, "No data available");
     }
+    const bgColorSet = new Set();
+    headers.forEach((header)=>{
+        var _header_style, _d3_color;
+        const bg = header === null || header === void 0 ? void 0 : (_header_style = header.style) === null || _header_style === void 0 ? void 0 : _header_style.backgroundColor;
+        const normalized = (_d3_color = _d3color.color(bg || '')) === null || _d3_color === void 0 ? void 0 : _d3_color.formatHex();
+        if (normalized) {
+            bgColorSet.add(normalized);
+        }
+    });
+    let sharedBackgroundColor;
+    let useSharedBackground = false;
+    /*
+    If we have only one or two unique background colors, we can consider using a shared background color
+    for the table headers. This is to ensure better contrast with the foreground text.
+    For size 1, we will consider that as default color if it satisfies the contrast ratio.
+    There could also be a scenario where backgroundcolor array is of size 2, for eg: ["dimsgray", "gray"],
+    which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background
+    color won't run here. So will consider for size 2 as well.
+    For size greater than this, we will consider that user wants different colors and will let color contrast fail
+    if any.
+    */ if (bgColorSet.size === 1 || bgColorSet.size === 2) {
+        const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];
+        for (const header of headers){
+            var _header_style;
+            const fg = header === null || header === void 0 ? void 0 : (_header_style = header.style) === null || _header_style === void 0 ? void 0 : _header_style.color;
+            if (fg && (0, _colors.getColorContrast)(fg, candidateBg) >= 3) {
+                sharedBackgroundColor = candidateBg;
+                useSharedBackground = true;
+                break;
+            }
+        }
+    }
     return /*#__PURE__*/ _react.createElement("div", {
         ref: (el)=>_rootElem.current = el,
         className: classes.root,
@@ -54,15 +113,40 @@ const ChartTable = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             width: width ? `${width}px` : '100%',
             height: height ? `${height}px` : '650px'
         }
-    }, /*#__PURE__*/ _react.createElement("thead", null, /*#__PURE__*/ _react.createElement("tr", null, headers.map((header, idx)=>/*#__PURE__*/ _react.createElement("th", {
+    }, /*#__PURE__*/ _react.createElement("thead", null, /*#__PURE__*/ _react.createElement("tr", null, headers.map((header, idx)=>{
+        const style = {
+            ...header === null || header === void 0 ? void 0 : header.style
+        };
+        const fg = style.color;
+        const bg = style.backgroundColor;
+        if (useSharedBackground) {
+            style.backgroundColor = sharedBackgroundColor;
+        } else if (fg || bg) {
+            style.backgroundColor = getSafeBackgroundColor(fg, bg);
+        }
+        return /*#__PURE__*/ _react.createElement("th", {
             key: idx,
-            className: classes.headerCell
-        }, header.value)))), rows && rows.length > 0 && /*#__PURE__*/ _react.createElement("tbody", null, rows.map((row, rowIdx)=>/*#__PURE__*/ _react.createElement("tr", {
+            className: classes.headerCell,
+            style: style,
+            tabIndex: 0
+        }, header.value);
+    }))), rows && rows.length > 0 && /*#__PURE__*/ _react.createElement("tbody", null, rows.map((row, rowIdx)=>/*#__PURE__*/ _react.createElement("tr", {
             key: rowIdx
-        }, row.map((cell, colIdx)=>/*#__PURE__*/ _react.createElement("td", {
+        }, row.map((cell, colIdx)=>{
+            const style = {
+                ...cell === null || cell === void 0 ? void 0 : cell.style
+            };
+            const fg = style.color;
+            const bg = style.backgroundColor;
+            if (fg || bg) {
+                style.backgroundColor = getSafeBackgroundColor(fg, bg);
+            }
+            return /*#__PURE__*/ _react.createElement("td", {
                 key: colIdx,
                 className: classes.bodyCell,
-                style: cell.style
-            }, cell.value))))))))));
+                style: style,
+                tabIndex: 0
+            }, cell.value);
+        })))))))));
 });
 ChartTable.displayName = 'ChartTable';

package/lib-commonjs/components/ChartTable/ChartTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ChartTable/ChartTable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChartTableProps } from './ChartTable.types';\nimport { useChartTableStyles } from './useChartTableStyles.styles';\nimport { useRtl } from '../../utilities/utilities';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\n\nexport const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwardRef<HTMLDivElement, ChartTableProps>(\n  (props, forwardedRef) => {\n    const { headers, rows, width, height } = props;\n    const _isRTL: boolean = useRtl();\n    const _rootElem = React.useRef<HTMLDivElement | null>(null);\n    const classes = useChartTableStyles(props);\n\n    React.useImperativeHandle(\n      props.componentRef,\n      () => ({\n        chartContainer: _rootElem.current,\n        toImage: (opts?: ImageExportOptions): Promise<string> => {\n          return toImage(_rootElem.current, undefined, _isRTL, opts);\n        },\n      }),\n      [],\n    );\n\n    if (!headers || headers.length === 0) {\n      return <div>No data available</div>;\n    }\n\n    return (\n      <div\n        ref={el => (_rootElem.current = el)}\n        className={classes.root as string}\n        style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }}\n      >\n        <svg width={width ?? '100%'} height={height ?? '650px'}>\n          <foreignObject x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n            <div\n              style={{\n                maxHeight: height ? `${height}px` : '650px',\n                overflowY: 'auto',\n                overflowX: 'auto',\n              }}\n            >\n              <table\n                className={classes.table}\n                style={{\n                  width: width ? `${width}px` : '100%',\n                  height: height ? `${height}px` : '650px',\n                }}\n              >\n                <thead>\n                  <tr>\n                    {headers.map((header, idx) => (\n                      <th key={idx} className={classes.headerCell}>\n                        {header.value}\n                      </th>\n                    ))}\n                  </tr>\n                </thead>\n                {rows && rows.length > 0 && (\n                  <tbody>\n                    {rows.map((row, rowIdx) => (\n                      <tr key={rowIdx}>\n                        {row.map((cell, colIdx) => (\n                          <td key={colIdx} className={classes.bodyCell} style={cell.style}>\n                            {cell.value}\n                          </td>\n                        ))}\n                      </tr>\n                    ))}\n                  </tbody>\n                )}\n              </table>\n            </div>\n          </foreignObject>\n        </svg>\n      </div>\n    );\n  },\n);\n\nChartTable.displayName = 'ChartTable';\n"],"names":["React","useChartTableStyles","useRtl","toImage","ChartTable","forwardRef","props","forwardedRef","headers","rows","width","height","_isRTL","_rootElem","useRef","classes","useImperativeHandle","componentRef","chartContainer","current","opts","undefined","length","div","ref","el","className","root","style","overflow","svg","foreignObject","x","y","maxHeight","overflowY","overflowX","table","thead","tr","map","header","idx","th","key","headerCell","value","tbody","row","rowIdx","cell","colIdx","td","bodyCell","displayName"],"mappings":";;;;+BAOaI;;;;;;;iEAPU,QAAQ;2CAEK,+BAA+B;2BAC5C,4BAA4B;kCAE3B,qCAAqC;AAEtD,mBAAMA,WAAAA,GAAuDJ,OAAMK,UAAU,CAClF,CAACC,OAAOC;IACN,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGL;IACzC,MAAMM,SAAkBV,qBAAAA;IACxB,MAAMW,YAAYb,OAAMc,MAAM,CAAwB;IACtD,MAAMC,cAAUd,8CAAAA,EAAoBK;IAEpCN,OAAMgB,mBAAmB,CACvBV,MAAMW,YAAY,EAClB,IAAO;YACLC,gBAAgBL,UAAUM,OAAO;YACjChB,SAAS,CAACiB;gBACR,WAAOjB,yBAAAA,EAAQU,UAAUM,OAAO,EAAEE,WAAWT,QAAQQ;YACvD;QACF,CAAA,GACA,EAAE;IAGJ,IAAI,CAACZ,WAAWA,QAAQc,MAAM,KAAK,GAAG;QACpC,OAAA,WAAA,GAAO,OAAA,aAAA,CAACC,OAAAA,MAAI;IACd;IAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAACA,OAAAA;QACCC,KAAKC,CAAAA,KAAOZ,UAAUM,OAAO,GAAGM;QAChCC,WAAWX,QAAQY,IAAI;QACvBC,OAAO;YAAEjB,QAAQA,SAAS,GAAGA,OAAO,EAAE,CAAC,GAAG;YAASkB,UAAU;QAAS;qBAEtE,OAAA,aAAA,CAACC,OAAAA;QAAIpB,OAAOA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAAS;QAAQC,QAAQA,WAAAA,QAAAA,WAAAA,KAAAA,IAAAA,SAAU;qBAC7C,OAAA,aAAA,CAACoB,iBAAAA;QAAcC,GAAE;QAAIC,GAAE;QAAIvB,OAAM;QAAOC,QAAO;qBAC7C,OAAA,aAAA,CAACY,OAAAA;QACCK,OAAO;YACLM,WAAWvB,SAAS,GAAGA,OAAO,EAAE,CAAC,GAAG;YACpCwB,WAAW;YACXC,WAAW;QACb;qBAEA,OAAA,aAAA,CAACC,SAAAA;QACCX,WAAWX,QAAQsB,KAAK;QACxBT,OAAO;YACLlB,OAAOA,QAAQ,GAAGA,MAAM,EAAE,CAAC,GAAG;YAC9BC,QAAQA,SAAS,GAAGA,OAAO,EAAE,CAAC,GAAG;QACnC;qBAEA,OAAA,aAAA,CAAC2B,SAAAA,MAAAA,WAAAA,GACC,OAAA,aAAA,CAACC,MAAAA,MACE/B,QAAQgC,GAAG,CAAC,CAACC,QAAQC,MAAAA,WAAAA,GACpB,OAAA,aAAA,CAACC,MAAAA;YAAGC,KAAKF;YAAKhB,WAAWX,QAAQ8B,UAAU;WACxCJ,OAAOK,KAAK,MAKpBrC,QAAQA,KAAKa,MAAM,GAAG,KAAA,WAAA,GACrB,OAAA,aAAA,CAACyB,SAAAA,MACEtC,KAAK+B,GAAG,CAAC,CAACQ,KAAKC,SAAAA,WAAAA,GACd,OAAA,aAAA,CAACV,MAAAA;YAAGK,KAAKK;WACND,IAAIR,GAAG,CAAC,CAACU,MAAMC,SAAAA,WAAAA,GACd,OAAA,aAAA,CAACC,MAAAA;gBAAGR,KAAKO;gBAAQzB,WAAWX,QAAQsC,QAAQ;gBAAEzB,OAAOsB,KAAKtB,KAAK;eAC5DsB,KAAKJ,KAAK;AAarC,GACA;AAEF1C,WAAWkD,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ChartTable/ChartTable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChartTableProps } from './ChartTable.types';\nimport { useChartTableStyles } from './useChartTableStyles.styles';\nimport { useRtl } from '../../utilities/utilities';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\nimport { tokens } from '@fluentui/react-theme';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\n\nfunction invertHexColor(hex: string): string {\n  const color = d3.color(hex);\n  if (!color) {\n    return tokens.colorNeutralForeground1!;\n  }\n  const rgb = color.rgb();\n  return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();\n}\n\nfunction getSafeBackgroundColor(foreground?: string, background?: string): string {\n  const fallbackFg = tokens.colorNeutralForeground1;\n  const fallbackBg = tokens.colorNeutralBackground1;\n\n  const fg = d3.color(foreground || fallbackFg);\n  const bg = d3.color(background || fallbackBg);\n  if (!fg || !bg) {\n    return fallbackBg;\n  }\n  const contrast = getColorContrast(fg.formatHex(), bg.formatHex());\n  if (contrast >= 3) {\n    return bg.formatHex();\n  }\n\n  const invertedBg = invertHexColor(bg.formatHex());\n  const invertedContrast = getColorContrast(fg.formatHex(), invertedBg);\n  return invertedContrast >= 3 ? invertedBg : fallbackBg;\n}\n\nexport const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwardRef<HTMLDivElement, ChartTableProps>(\n  (props, forwardedRef) => {\n    const { headers, rows, width, height } = props;\n    const _isRTL: boolean = useRtl();\n    const _rootElem = React.useRef<HTMLDivElement | null>(null);\n    const classes = useChartTableStyles(props);\n\n    React.useImperativeHandle(\n      props.componentRef,\n      () => ({\n        chartContainer: _rootElem.current,\n        toImage: (opts?: ImageExportOptions): Promise<string> => {\n          return toImage(_rootElem.current, undefined, _isRTL, opts);\n        },\n      }),\n      [],\n    );\n\n    if (!headers || headers.length === 0) {\n      return <div>No data available</div>;\n    }\n\n    const bgColorSet = new Set<string>();\n    headers.forEach(header => {\n      const bg = header?.style?.backgroundColor;\n      const normalized = d3.color(bg || '')?.formatHex();\n      if (normalized) {\n        bgColorSet.add(normalized);\n      }\n    });\n    let sharedBackgroundColor: string | undefined;\n    let useSharedBackground = false;\n\n    /*\n    If we have only one or two unique background colors, we can consider using a shared background color\n    for the table headers. This is to ensure better contrast with the foreground text.\n    For size 1, we will consider that as default color if it satisfies the contrast ratio.\n    There could also be a scenario where backgroundcolor array is of size 2, for eg: [\"dimsgray\", \"gray\"],\n    which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background\n    color won't run here. So will consider for size 2 as well.\n    For size greater than this, we will consider that user wants different colors and will let color contrast fail\n    if any.\n    */\n    if (bgColorSet.size === 1 || bgColorSet.size === 2) {\n      const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];\n      for (const header of headers) {\n        const fg = header?.style?.color;\n        if (fg && getColorContrast(fg, candidateBg) >= 3) {\n          sharedBackgroundColor = candidateBg;\n          useSharedBackground = true;\n          break;\n        }\n      }\n    }\n\n    return (\n      <div\n        ref={el => (_rootElem.current = el)}\n        className={classes.root as string}\n        style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }}\n      >\n        <svg width={width ?? '100%'} height={height ?? '650px'}>\n          <foreignObject x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n            <div\n              style={{\n                maxHeight: height ? `${height}px` : '650px',\n                overflowY: 'auto',\n                overflowX: 'auto',\n              }}\n            >\n              <table\n                className={classes.table}\n                style={{\n                  width: width ? `${width}px` : '100%',\n                  height: height ? `${height}px` : '650px',\n                }}\n              >\n                <thead>\n                  <tr>\n                    {headers.map((header, idx) => {\n                      const style = { ...header?.style };\n                      const fg = style.color;\n                      const bg = style.backgroundColor;\n\n                      if (useSharedBackground) {\n                        style.backgroundColor = sharedBackgroundColor;\n                      } else if (fg || bg) {\n                        style.backgroundColor = getSafeBackgroundColor(fg, bg);\n                      }\n                      return (\n                        <th key={idx} className={classes.headerCell} style={style} tabIndex={0}>\n                          {header.value}\n                        </th>\n                      );\n                    })}\n                  </tr>\n                </thead>\n                {rows && rows.length > 0 && (\n                  <tbody>\n                    {rows.map((row, rowIdx) => (\n                      <tr key={rowIdx}>\n                        {row.map((cell, colIdx) => {\n                          const style = { ...cell?.style };\n                          const fg = style.color;\n                          const bg = style.backgroundColor;\n                          if (fg || bg) {\n                            style.backgroundColor = getSafeBackgroundColor(fg, bg);\n                          }\n                          return (\n                            <td key={colIdx} className={classes.bodyCell} style={style} tabIndex={0}>\n                              {cell.value}\n                            </td>\n                          );\n                        })}\n                      </tr>\n                    ))}\n                  </tbody>\n                )}\n              </table>\n            </div>\n          </foreignObject>\n        </svg>\n      </div>\n    );\n  },\n);\n\nChartTable.displayName = 'ChartTable';\n"],"names":["React","useChartTableStyles","useRtl","toImage","tokens","d3","getColorContrast","invertHexColor","hex","color","colorNeutralForeground1","rgb","r","g","b","formatHex","getSafeBackgroundColor","foreground","background","fallbackFg","fallbackBg","colorNeutralBackground1","fg","bg","contrast","invertedBg","invertedContrast","ChartTable","forwardRef","props","forwardedRef","headers","rows","width","height","_isRTL","_rootElem","useRef","classes","useImperativeHandle","componentRef","chartContainer","current","opts","undefined","length","div","bgColorSet","Set","forEach","header","style","backgroundColor","normalized","add","sharedBackgroundColor","useSharedBackground","size","candidateBg","Array","from","ref","el","className","root","overflow","svg","foreignObject","x","y","maxHeight","overflowY","overflowX","table","thead","tr","map","idx","th","key","headerCell","tabIndex","value","tbody","row","rowIdx","cell","colIdx","td","bodyCell","displayName"],"mappings":"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"}

package/lib-commonjs/components/CommonComponents/CartesianChart.js

@@ -46,10 +46,12 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     const [containerHeight, setContainerHeight] = _react.useState(0);
     const [startFromX, setStartFromX] = _react.useState(0);
     const [prevProps, setPrevProps] = _react.useState(null);
-    const chartTypesToCheck = [
+    const chartTypesWithStringYAxis = [
         _index.ChartTypes.HorizontalBarChartWithAxis,
         _index.ChartTypes.HeatMapChart,
-        _index.ChartTypes.GanttChart
+        _index.ChartTypes.VerticalStackedBarChart,
+        _index.ChartTypes.GanttChart,
+        _index.ChartTypes.ScatterChart
     ];
     var _props_margins_top, _props_margins_bottom, _props_margins_left, _props_margins_right, _props_margins_right1, _props_margins_left1;
     /**
@@ -64,17 +66,35 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         right: _useRtl ? (_props_margins_left = (_props_margins2 = props.margins) === null || _props_margins2 === void 0 ? void 0 : _props_margins2.left) !== null && _props_margins_left !== void 0 ? _props_margins_left : 40 : ((_props_margins_right = (_props_margins3 = props.margins) === null || _props_margins3 === void 0 ? void 0 : _props_margins3.right) !== null && _props_margins_right !== void 0 ? _props_margins_right : props === null || props === void 0 ? void 0 : props.secondaryYScaleOptions) ? 40 : 20,
         left: _useRtl ? ((_props_margins_right1 = (_props_margins4 = props.margins) === null || _props_margins4 === void 0 ? void 0 : _props_margins4.right) !== null && _props_margins_right1 !== void 0 ? _props_margins_right1 : props === null || props === void 0 ? void 0 : props.secondaryYScaleOptions) ? 40 : 20 : (_props_margins_left1 = (_props_margins5 = props.margins) === null || _props_margins5 === void 0 ? void 0 : _props_margins5.left) !== null && _props_margins_left1 !== void 0 ? _props_margins_left1 : 40
     };
+    const TITLE_MARGIN_HORIZONTAL = 24;
+    const TITLE_MARGIN_VERTICAL = 20;
     if (props.xAxisTitle !== undefined && props.xAxisTitle !== '') {
         var _props_margins6;
         var _props_margins_bottom1;
-        margins.bottom = (_props_margins_bottom1 = (_props_margins6 = props.margins) === null || _props_margins6 === void 0 ? void 0 : _props_margins6.bottom) !== null && _props_margins_bottom1 !== void 0 ? _props_margins_bottom1 : 55;
+        margins.bottom = (_props_margins_bottom1 = (_props_margins6 = props.margins) === null || _props_margins6 === void 0 ? void 0 : _props_margins6.bottom) !== null && _props_margins_bottom1 !== void 0 ? _props_margins_bottom1 : margins.bottom + TITLE_MARGIN_VERTICAL;
     }
     if (props.yAxisTitle !== undefined && props.yAxisTitle !== '') {
         var _props_margins7, _props_margins8, _props_margins9, _props_margins10;
         var _props_margins_right2, _props_margins_left2;
-        margins.left = _useRtl ? ((_props_margins_right2 = (_props_margins7 = props.margins) === null || _props_margins7 === void 0 ? void 0 : _props_margins7.right) !== null && _props_margins_right2 !== void 0 ? _props_margins_right2 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? 80 : 40 : (_props_margins_left2 = (_props_margins8 = props.margins) === null || _props_margins8 === void 0 ? void 0 : _props_margins8.left) !== null && _props_margins_left2 !== void 0 ? _props_margins_left2 : 60;
+        margins.left = _useRtl ? ((_props_margins_right2 = (_props_margins7 = props.margins) === null || _props_margins7 === void 0 ? void 0 : _props_margins7.right) !== null && _props_margins_right2 !== void 0 ? _props_margins_right2 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? margins.right + 2 * TITLE_MARGIN_HORIZONTAL : margins.right + TITLE_MARGIN_HORIZONTAL : (_props_margins_left2 = (_props_margins8 = props.margins) === null || _props_margins8 === void 0 ? void 0 : _props_margins8.left) !== null && _props_margins_left2 !== void 0 ? _props_margins_left2 : margins.left + TITLE_MARGIN_HORIZONTAL;
         var _props_margins_left3, _props_margins_right3;
-        margins.right = _useRtl ? (_props_margins_left3 = (_props_margins9 = props.margins) === null || _props_margins9 === void 0 ? void 0 : _props_margins9.left) !== null && _props_margins_left3 !== void 0 ? _props_margins_left3 : 60 : ((_props_margins_right3 = (_props_margins10 = props.margins) === null || _props_margins10 === void 0 ? void 0 : _props_margins10.right) !== null && _props_margins_right3 !== void 0 ? _props_margins_right3 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? 80 : 40;
+        margins.right = _useRtl ? (_props_margins_left3 = (_props_margins9 = props.margins) === null || _props_margins9 === void 0 ? void 0 : _props_margins9.left) !== null && _props_margins_left3 !== void 0 ? _props_margins_left3 : margins.left + TITLE_MARGIN_HORIZONTAL : ((_props_margins_right3 = (_props_margins10 = props.margins) === null || _props_margins10 === void 0 ? void 0 : _props_margins10.right) !== null && _props_margins_right3 !== void 0 ? _props_margins_right3 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? margins.right + 2 * TITLE_MARGIN_HORIZONTAL : margins.right + TITLE_MARGIN_HORIZONTAL;
+    }
+    if (props.xAxisAnnotation !== undefined && props.xAxisAnnotation !== '') {
+        var _props_margins11;
+        var _props_margins_top1;
+        margins.top = (_props_margins_top1 = (_props_margins11 = props.margins) === null || _props_margins11 === void 0 ? void 0 : _props_margins11.top) !== null && _props_margins_top1 !== void 0 ? _props_margins_top1 : margins.top + TITLE_MARGIN_VERTICAL;
+    }
+    if (props.yAxisAnnotation !== undefined && props.yAxisAnnotation !== '' && (props.secondaryYAxistitle === undefined || props.secondaryYAxistitle === '')) {
+        if (_useRtl) {
+            var _props_margins12;
+            var _props_margins_right4;
+            margins.left = (_props_margins_right4 = (_props_margins12 = props.margins) === null || _props_margins12 === void 0 ? void 0 : _props_margins12.right) !== null && _props_margins_right4 !== void 0 ? _props_margins_right4 : margins.right + TITLE_MARGIN_HORIZONTAL;
+        } else {
+            var _props_margins13;
+            var _props_margins_right5;
+            margins.right = (_props_margins_right5 = (_props_margins13 = props.margins) === null || _props_margins13 === void 0 ? void 0 : _props_margins13.right) !== null && _props_margins_right5 !== void 0 ? _props_margins_right5 : margins.right + TITLE_MARGIN_HORIZONTAL;
+        }
     }
     const classes = (0, _useCartesianChartStylesstyles.useCartesianChartStyles)(props);
     const focusAttributes = (0, _reacttabster.useFocusableGroup)();
@@ -87,8 +107,8 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         if (props !== null) {
             setPrevProps(props);
         }
-        if (chartTypesToCheck.includes(props.chartType) && props.showYAxisLables && yAxisElement) {
-            const maxYAxisLabelLength = calculateMaxYAxisLabelLength(props.chartType, props.points, classes.yAxis);
+        if (chartTypesWithStringYAxis.includes(props.chartType) && props.showYAxisLables && yAxisElement && props.yAxisType === _index.YAxisType.StringAxis) {
+            const maxYAxisLabelLength = calculateMaxYAxisLabelLength(classes.yAxis);
             if (startFromX !== maxYAxisLabelLength) {
                 setStartFromX(maxYAxisLabelLength);
             }
@@ -110,8 +130,8 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                 _fitParentContainer();
             }
         }
-        if (chartTypesToCheck.includes(props.chartType) && props.showYAxisLables && yAxisElement) {
-            const maxYAxisLabelLength = calculateMaxYAxisLabelLength(props.chartType, props.points, classes.yAxis);
+        if (chartTypesWithStringYAxis.includes(props.chartType) && props.showYAxisLables && yAxisElement && props.yAxisType === _index.YAxisType.StringAxis) {
+            const maxYAxisLabelLength = calculateMaxYAxisLabelLength(classes.yAxis);
             if (startFromX !== maxYAxisLabelLength) {
                 setStartFromX(maxYAxisLabelLength);
             }
@@ -142,19 +162,14 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     function _generateCallout(calloutProps) {
         return /*#__PURE__*/ _react.createElement(_ChartPopover.ChartPopover, calloutProps);
     }
-    function calculateMaxYAxisLabelLength(chartType, points, className) {
+    function calculateMaxYAxisLabelLength(className) {
         const formatTickLabel = (str)=>{
             if (props.showYAxisLablesTooltip) {
                 return (0, _index.truncateString)(str, props.noOfCharsToTruncate || 4);
             }
             return str;
         };
-        if (chartType === _index.ChartTypes.HeatMapChart) {
-            var _points__data, _points_;
-            return (0, _index.calculateLongestLabelWidth)((_points_ = points[0]) === null || _points_ === void 0 ? void 0 : (_points__data = _points_.data) === null || _points__data === void 0 ? void 0 : _points__data.map((point)=>formatTickLabel(`${point.y}`)), `.${className} text`);
-        } else {
-            return (0, _index.calculateLongestLabelWidth)(points === null || points === void 0 ? void 0 : points.map((point)=>formatTickLabel(`${point.y}`)), `.${className} text`);
-        }
+        return (0, _index.calculateLongestLabelWidth)(props.stringDatasetForYAxisDomain.map((label)=>formatTickLabel(label)), `.${className} text`);
     }
     const { calloutProps, points, chartType, svgProps, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter } = props;
     if (props.parentRef) {
@@ -163,7 +178,8 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     const margin = {
         ...margins
     };
-    if (chartTypesToCheck.includes(props.chartType)) {
+    // Note: This check is unnecessary since startFromX is only set for charts with string y-axis.
+    if (chartTypesWithStringYAxis.includes(props.chartType)) {
         if (!_useRtl) {
             margin.left += startFromX;
         } else {
@@ -175,6 +191,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     let callout = null;
     let children = null;
     if (props.enableFirstRenderOptimization && chartContainer.current || !props.enableFirstRenderOptimization) {
+        var _props_xAxis, _props_xAxis1, _props_yAxis, _props_yAxis1;
         _isFirstRender.current = false;
         var _props_showRoundOffXTickValues;
         const XAxisParams = {
@@ -197,7 +214,9 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             xAxisOuterPadding: props.xAxisOuterPadding,
             containerWidth: containerWidth,
             hideTickOverlap: props.rotateXAxisLables ? false : props.hideTickOverlap,
-            calcMaxLabelWidth: _calcMaxLabelWidthWithTransform
+            calcMaxLabelWidth: _calcMaxLabelWidthWithTransform,
+            tickStep: (_props_xAxis = props.xAxis) === null || _props_xAxis === void 0 ? void 0 : _props_xAxis.tickStep,
+            tick0: (_props_xAxis1 = props.xAxis) === null || _props_xAxis1 === void 0 ? void 0 : _props_xAxis1.tick0
         };
         /**
      * These scales used for 2 purposes.
@@ -209,7 +228,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         let tickValues;
         switch(props.xAxisType){
             case _index.XAxisTypes.NumericAxis:
-                ({ xScale, tickValues } = (0, _index.createNumericXAxis)(XAxisParams, props.tickParams, props.chartType, culture));
+                ({ xScale, tickValues } = (0, _index.createNumericXAxis)(XAxisParams, props.tickParams, props.chartType, culture, props.xScaleType));
                 break;
             case _index.XAxisTypes.DateAxis:
                 ({ xScale, tickValues } = (0, _index.createDateXAxis)(XAxisParams, props.tickParams, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter, props.useUTC, props.chartType));
@@ -218,7 +237,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                 ({ xScale, tickValues } = (0, _index.createStringXAxis)(XAxisParams, props.tickParams, props.datasetForXAxisDomain, culture));
                 break;
             default:
-                ({ xScale, tickValues } = (0, _index.createNumericXAxis)(XAxisParams, props.tickParams, props.chartType, culture));
+                ({ xScale, tickValues } = (0, _index.createNumericXAxis)(XAxisParams, props.tickParams, props.chartType, culture, props.xScaleType));
         }
         _xScale = xScale;
         _tickValues = tickValues;
@@ -238,7 +257,10 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             // please note these padding default values must be consistent in here
             // and the parent chart(HBWA/Vertical etc..) for more details refer example
             // http://using-d3js.com/04_07_ordinal_scales.html
-            yAxisPadding: props.yAxisPadding || 0
+            yAxisPadding: props.yAxisPadding || 0,
+            tickValues: props.yAxisTickValues,
+            tickStep: (_props_yAxis = props.yAxis) === null || _props_yAxis === void 0 ? void 0 : _props_yAxis.tickStep,
+            tick0: (_props_yAxis1 = props.yAxis) === null || _props_yAxis1 === void 0 ? void 0 : _props_yAxis1.tick0
         };
         /**
      * These scales used for 2 purposes.
@@ -253,7 +275,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             yAxisDomainValues: []
         };
         if (props.yAxisType && props.yAxisType === _index.YAxisType.StringAxis) {
-            yScalePrimary = props.createStringYAxis(YAxisParams, props.stringDatasetForYAxisDomain, _useRtl, props.barwidth);
+            yScalePrimary = props.createStringYAxis(YAxisParams, props.stringDatasetForYAxisDomain, _useRtl, props.barwidth, props.chartType);
         } else {
             // TODO: Since the scale domain values are now computed independently for both the primary and
             // secondary y-axes, the yMinValue and yMaxValue props are no longer necessary for accurately
@@ -276,11 +298,11 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                     yMinMaxValues: props.getMinMaxOfYAxis(points, props.yAxisType, true),
                     yAxisPadding: props.yAxisPadding
                 };
-                yScaleSecondary = props.createYAxis(YAxisParamsSecondary, _useRtl, axisData, isIntegralDataset, chartType, true, props.roundedTicks);
+                yScaleSecondary = props.createYAxis(YAxisParamsSecondary, _useRtl, axisData, isIntegralDataset, chartType, true, props.roundedTicks, props.secondaryYScaleType);
             }
-            yScalePrimary = props.createYAxis(YAxisParams, _useRtl, axisData, isIntegralDataset, chartType, false, props.roundedTicks);
+            yScalePrimary = props.createYAxis(YAxisParams, _useRtl, axisData, isIntegralDataset, chartType, false, props.roundedTicks, props.yScaleType);
         }
-        if (chartTypesToCheck.includes(props.chartType)) {
+        if (chartTypesWithStringYAxis.includes(props.chartType) && props.yAxisType === _index.YAxisType.StringAxis) {
             // Removing un wanted tooltip div from DOM, when prop not provided, for proper cleanup
             // of unwanted DOM elements, to prevent flacky behaviour in tooltips , that might occur
             // in creating tooltips when tooltips are enabled( as we try to recreate a tspan with _tooltipId)
@@ -335,6 +357,12 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     };
     const xAxisTitleMaximumAllowedWidth = svgDimensions.width - margins.left - margins.right - startFromX;
     const yAxisTitleMaximumAllowedHeight = svgDimensions.height - margins.bottom - margins.top - _removalValueForTextTuncate - titleMargin;
+    const commonSvgToolTipProps = {
+        wrapContent: _index.wrapContent,
+        showBackground: true,
+        className: classes.svgTooltip,
+        content: ''
+    };
     /**
    * When screen resizes, along with screen, chart also auto adjusted.
    * This method used to adjust height and width of the charts.
@@ -494,6 +522,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         transform: `translate(0, ${svgDimensions.height - margins.bottom - _removalValueForTextTuncate})`,
         className: classes.xAxis
     }), props.xAxisTitle !== undefined && props.xAxisTitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        ...commonSvgToolTipProps,
         content: props.xAxisTitle,
         textProps: {
             x: margins.left + startFromX + xAxisTitleMaximumAllowedWidth / 2,
@@ -501,10 +530,18 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             className: classes.axisTitle,
             textAnchor: 'middle'
         },
-        maxWidth: xAxisTitleMaximumAllowedWidth,
-        wrapContent: _index.wrapContent,
-        showBackground: true,
-        className: classes.svgTooltip
+        maxWidth: xAxisTitleMaximumAllowedWidth
+    }), props.xAxisAnnotation !== undefined && props.xAxisAnnotation !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        ...commonSvgToolTipProps,
+        content: props.xAxisAnnotation,
+        textProps: {
+            x: margins.left + startFromX + xAxisTitleMaximumAllowedWidth / 2,
+            y: titleMargin + 3,
+            className: classes.axisAnnotation,
+            textAnchor: 'middle',
+            'aria-hidden': true
+        },
+        maxWidth: xAxisTitleMaximumAllowedWidth
     }), /*#__PURE__*/ _react.createElement("g", {
         ref: (e)=>{
             yAxisElement.current = e;
@@ -520,6 +557,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         transform: `translate(${_useRtl ? margins.left + startFromX : svgDimensions.width - margins.right - startFromX}, 0)`,
         className: classes.yAxis
     }), props.secondaryYAxistitle !== undefined && props.secondaryYAxistitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        ...commonSvgToolTipProps,
         content: props.secondaryYAxistitle,
         textProps: {
             x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
@@ -529,11 +567,9 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                  ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
             className: classes.axisTitle
         },
-        maxWidth: yAxisTitleMaximumAllowedHeight,
-        wrapContent: _index.wrapContent,
-        showBackground: true,
-        className: classes.svgTooltip
+        maxWidth: yAxisTitleMaximumAllowedHeight
     })), children, props.yAxisTitle !== undefined && props.yAxisTitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        ...commonSvgToolTipProps,
         content: props.yAxisTitle,
         textProps: {
             x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
@@ -543,10 +579,20 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                  ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
             className: classes.axisTitle
         },
-        maxWidth: yAxisTitleMaximumAllowedHeight,
-        wrapContent: _index.wrapContent,
-        showBackground: true,
-        className: classes.svgTooltip
+        maxWidth: yAxisTitleMaximumAllowedHeight
+    }), props.yAxisAnnotation !== undefined && props.yAxisAnnotation !== '' && (props.secondaryYAxistitle === undefined || props.secondaryYAxistitle === '') && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        ...commonSvgToolTipProps,
+        content: props.yAxisAnnotation,
+        textProps: {
+            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
+            y: _useRtl ? startFromX - titleMargin : svgDimensions.width - margins.right,
+            textAnchor: 'middle',
+            transform: `translate(${_useRtl ? margins.right / 2 - titleMargin : margins.right / 2 + titleMargin},
+                   ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
+            className: classes.axisAnnotation,
+            'aria-hidden': true
+        },
+        maxWidth: yAxisTitleMaximumAllowedHeight
     }))), !props.hideLegend && /*#__PURE__*/ _react.createElement("div", {
         ref: (e)=>legendContainer = e,
         className: classes.legendContainer