@fluentui/react-charts 9.3.6 → 9.3.8

package/lib/components/Sparkline/Sparkline.js

@@ -1,11 +1,11 @@
 'use client';
-import * as React from 'react';
-import { useSparklineStyles } from './useSparklineStyles.styles';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { extent as d3Extent, max as d3Max } from 'd3-array';
 import { scaleLinear as d3ScaleLinear } from 'd3-scale';
 import { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';
-import { max as d3Max, extent as d3Extent } from 'd3-array';
-import { useFocusableGroup } from '@fluentui/react-tabster';
+import * as React from 'react';
 import { useRtl } from '../../utilities/index';
+import { useSparklineStyles } from './useSparklineStyles.styles';
 /**
  * Sparkline is the context wrapper and container for all Sparkline content/controls,
  * It has no direct style or slot opinions.
@@ -23,9 +23,13 @@ import { useRtl } from '../../utilities/index';
     let _emptyChartId = '_SparklineChart_empty';
     let _isRTL = useRtl();
     const [points, setPoints] = React.useState([]);
-    const width = 80;
-    const height = 20;
-    const valueTextWidth = 80;
+    var _props_width;
+    // Use props with default fallbacks instead of hardcoded values
+    const width = (_props_width = props.width) !== null && _props_width !== void 0 ? _props_width : 80;
+    var _props_height;
+    const height = (_props_height = props.height) !== null && _props_height !== void 0 ? _props_height : 20;
+    var _props_valueTextWidth;
+    const valueTextWidth = (_props_valueTextWidth = props.valueTextWidth) !== null && _props_valueTextWidth !== void 0 ? _props_valueTextWidth : 80;
     const line = React.useMemo(()=>{
         return d3Line().x((d)=>x(d.x)).y((d)=>y(d.y)).curve(d3curveLinear);
     }, [

package/lib/components/Sparkline/Sparkline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Sparkline/Sparkline.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSparklineStyles } from './useSparklineStyles.styles';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { LineChartDataPoint } from '../../types/DataPoint';\nimport { useRtl } from '../../utilities/index';\nimport { SparklineProps } from '../../index';\n\n/**\n * Sparkline is the context wrapper and container for all Sparkline content/controls,\n * It has no direct style or slot opinions.\n *\n * Sparkline also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Sparkline: React.FunctionComponent<SparklineProps> = React.forwardRef<HTMLDivElement, SparklineProps>(\n  (props, forwardedRef) => {\n    let margin = {\n      top: 2,\n      right: 0,\n      bottom: 0,\n      left: 0,\n    };\n    let x: any;\n    let y: any;\n    let _emptyChartId: string = '_SparklineChart_empty';\n    let _isRTL: boolean = useRtl();\n    const [points, setPoints] = React.useState<LineChartDataPoint[]>([]);\n    const width = 80;\n    const height = 20;\n    const valueTextWidth = 80;\n\n    const line = React.useMemo(() => {\n      return d3Line<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [x, y]);\n\n    const area = React.useMemo(() => {\n      return d3Area<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y0(height)\n        .y1((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [height, x, y]);\n\n    React.useEffect(() => {\n      if (!_isChartEmpty()) {\n        // eslint-disable-next-line @typescript-eslint/no-shadow\n        const _points = props.data!.lineChartData![0].data;\n\n        /* eslint-disable @typescript-eslint/no-explicit-any */\n        const [xMin, xMax] = d3Extent(_points, (d: any) => d.x);\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        x = d3ScaleLinear()\n          .domain([xMin, xMax])\n          .range([margin.left!, width - margin.right!]);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        y = d3ScaleLinear()\n          /* eslint-disable @typescript-eslint/no-explicit-any */\n          .domain([0, d3Max(_points, (d: any) => d.y)])\n          .range([height - margin.bottom!, margin.top!]);\n\n        setPoints(_points as LineChartDataPoint[]);\n      }\n    }, []);\n\n    const { data } = props;\n    function _isChartEmpty(): boolean {\n      return !(\n        data &&\n        data.lineChartData &&\n        data.lineChartData.length > 0 &&\n        data.lineChartData.filter(item => item.data.length === 0).length === 0\n      );\n    }\n    function drawSparkline() {\n      if (!line || !area) {\n        return null;\n      }\n      return (\n        <>\n          <path\n            className=\"line\"\n            d={line(points)!}\n            fill={'transparent'}\n            opacity={1}\n            strokeWidth={2}\n            stroke={data!.lineChartData![0].color!}\n          />\n          <path\n            className=\"area\"\n            d={area(points)!}\n            opacity={1}\n            fillOpacity={0.2}\n            fill={data!.lineChartData![0].color!}\n            role=\"img\"\n            aria-hidden\n          />\n        </>\n      );\n    }\n\n    const classes = useSparklineStyles(props);\n    const focusAttributes = useFocusableGroup();\n    return !_isChartEmpty() ? (\n      <div className={classes.inlineBlock} {...focusAttributes}>\n        {width >= 50 && height >= 16 ? (\n          <svg\n            width={width}\n            height={height}\n            aria-label={`Sparkline with label ${data!.lineChartData![0].legend!}`}\n            tabIndex={0}\n          >\n            {points ? drawSparkline() : null}\n          </svg>\n        ) : (\n          <></>\n        )}\n        {props.showLegend && props.data!.lineChartData![0].legend ? (\n          <svg width={valueTextWidth} height={height}>\n            <text x=\"0%\" textAnchor={_isRTL ? 'end' : 'start'} dx={8} y=\"100%\" dy={-5} className={classes.valueText}>\n              {props.data!.lineChartData![0].legend!}\n            </text>\n          </svg>\n        ) : (\n          <></>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\nSparkline.displayName = 'Sparkline';\n"],"names":["React","useSparklineStyles","scaleLinear","d3ScaleLinear","area","d3Area","line","d3Line","curveLinear","d3curveLinear","max","d3Max","extent","d3Extent","useFocusableGroup","useRtl","Sparkline","forwardRef","props","forwardedRef","margin","top","right","bottom","left","x","y","_emptyChartId","_isRTL","points","setPoints","useState","width","height","valueTextWidth","useMemo","d","curve","y0","y1","useEffect","_isChartEmpty","_points","data","lineChartData","xMin","xMax","domain","range","length","filter","item","drawSparkline","path","className","fill","opacity","strokeWidth","stroke","color","fillOpacity","role","aria-hidden","classes","focusAttributes","div","inlineBlock","svg","aria-label","legend","tabIndex","showLegend","text","textAnchor","dx","dy","valueText","id","style","displayName"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Sparkline/Sparkline.tsx"],"sourcesContent":["'use client';\n\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { extent as d3Extent, max as d3Max } from 'd3-array';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport * as React from 'react';\nimport { SparklineProps } from '../../index';\nimport { LineChartDataPoint } from '../../types/DataPoint';\nimport { useRtl } from '../../utilities/index';\nimport { useSparklineStyles } from './useSparklineStyles.styles';\n\n/**\n * Sparkline is the context wrapper and container for all Sparkline content/controls,\n * It has no direct style or slot opinions.\n *\n * Sparkline also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Sparkline: React.FunctionComponent<SparklineProps> = React.forwardRef<HTMLDivElement, SparklineProps>(\n  (props, forwardedRef) => {\n    let margin = {\n      top: 2,\n      right: 0,\n      bottom: 0,\n      left: 0,\n    };\n    let x: any;\n    let y: any;\n    let _emptyChartId: string = '_SparklineChart_empty';\n    let _isRTL: boolean = useRtl();\n    const [points, setPoints] = React.useState<LineChartDataPoint[]>([]);\n\n    // Use props with default fallbacks instead of hardcoded values\n    const width = props.width ?? 80;\n    const height = props.height ?? 20;\n    const valueTextWidth = props.valueTextWidth ?? 80;\n\n    const line = React.useMemo(() => {\n      return d3Line<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [x, y]);\n\n    const area = React.useMemo(() => {\n      return d3Area<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y0(height)\n        .y1((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [height, x, y]);\n\n    React.useEffect(() => {\n      if (!_isChartEmpty()) {\n        // eslint-disable-next-line @typescript-eslint/no-shadow\n        const _points = props.data!.lineChartData![0].data;\n\n        /* eslint-disable @typescript-eslint/no-explicit-any */\n        const [xMin, xMax] = d3Extent(_points, (d: any) => d.x);\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        x = d3ScaleLinear()\n          .domain([xMin, xMax])\n          .range([margin.left!, width - margin.right!]);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        y = d3ScaleLinear()\n          /* eslint-disable @typescript-eslint/no-explicit-any */\n          .domain([0, d3Max(_points, (d: any) => d.y)])\n          .range([height - margin.bottom!, margin.top!]);\n\n        setPoints(_points as LineChartDataPoint[]);\n      }\n    }, []);\n\n    const { data } = props;\n    function _isChartEmpty(): boolean {\n      return !(\n        data &&\n        data.lineChartData &&\n        data.lineChartData.length > 0 &&\n        data.lineChartData.filter(item => item.data.length === 0).length === 0\n      );\n    }\n    function drawSparkline() {\n      if (!line || !area) {\n        return null;\n      }\n      return (\n        <>\n          <path\n            className=\"line\"\n            d={line(points)!}\n            fill={'transparent'}\n            opacity={1}\n            strokeWidth={2}\n            stroke={data!.lineChartData![0].color!}\n          />\n          <path\n            className=\"area\"\n            d={area(points)!}\n            opacity={1}\n            fillOpacity={0.2}\n            fill={data!.lineChartData![0].color!}\n            role=\"img\"\n            aria-hidden\n          />\n        </>\n      );\n    }\n\n    const classes = useSparklineStyles(props);\n    const focusAttributes = useFocusableGroup();\n    return !_isChartEmpty() ? (\n      <div className={classes.inlineBlock} {...focusAttributes}>\n        {width >= 50 && height >= 16 ? (\n          <svg\n            width={width}\n            height={height}\n            aria-label={`Sparkline with label ${data!.lineChartData![0].legend!}`}\n            tabIndex={0}\n          >\n            {points ? drawSparkline() : null}\n          </svg>\n        ) : (\n          <></>\n        )}\n        {props.showLegend && props.data!.lineChartData![0].legend ? (\n          <svg width={valueTextWidth} height={height}>\n            <text x=\"0%\" textAnchor={_isRTL ? 'end' : 'start'} dx={8} y=\"100%\" dy={-5} className={classes.valueText}>\n              {props.data!.lineChartData![0].legend!}\n            </text>\n          </svg>\n        ) : (\n          <></>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\nSparkline.displayName = 'Sparkline';\n"],"names":["useFocusableGroup","extent","d3Extent","max","d3Max","scaleLinear","d3ScaleLinear","area","d3Area","line","d3Line","curveLinear","d3curveLinear","React","useRtl","useSparklineStyles","Sparkline","forwardRef","props","forwardedRef","margin","top","right","bottom","left","x","y","_emptyChartId","_isRTL","points","setPoints","useState","width","height","valueTextWidth","useMemo","d","curve","y0","y1","useEffect","_isChartEmpty","_points","data","lineChartData","xMin","xMax","domain","range","length","filter","item","drawSparkline","path","className","fill","opacity","strokeWidth","stroke","color","fillOpacity","role","aria-hidden","classes","focusAttributes","div","inlineBlock","svg","aria-label","legend","tabIndex","showLegend","text","textAnchor","dx","dy","valueText","id","style","displayName"],"mappings":"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"}

package/lib/components/VerticalBarChart/VerticalBarChart.js

@@ -3,13 +3,12 @@ import * as React from 'react';
 import { useVerticalBarChartStyles } from './useVerticalBarChartStyles.styles';
 import { max as d3Max, min as d3Min } from 'd3-array';
 import { line as d3Line } from 'd3-shape';
-import { select as d3Select } from 'd3-selection';
 import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3ScaleUtc } from 'd3-scale';
 import { useId } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { CartesianChart, Legends, ChartPopover } from '../../index';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, useRtl, areArraysEqual, calculateLongestLabelWidth, findVerticalNumericMinMaxOfY, createNumericYAxis, domainRangeOfVerticalNumeric, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth, sortAxisCategories } from '../../utilities/index';
-import { toImage } from '../../utilities/image-export-utils';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, useRtl, areArraysEqual, calculateLongestLabelWidth, findVerticalNumericMinMaxOfY, createNumericYAxis, domainRangeOfVerticalNumeric, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth, sortAxisCategories } from '../../utilities/index';
+import { useImageExport } from '../../utilities/hooks';
 var CircleVisbility = /*#__PURE__*/ function(CircleVisbility) {
     CircleVisbility["show"] = "visibility";
     CircleVisbility["hide"] = "hidden";
@@ -38,7 +37,6 @@ const MIN_DOMAIN_MARGIN = 8;
     let _yMax;
     let _yMin;
     let _isHavingLine = _checkForLine();
-    const _tooltipId = useId('VCTooltipID_');
     let _xAxisType;
     let _calloutAnchorPoint;
     let _domainMargin;
@@ -48,8 +46,7 @@ const MIN_DOMAIN_MARGIN = 8;
     const _vbcBarId = useId('_VBC_bar_');
     let _xAxisInnerPadding = 0;
     let _xAxisOuterPadding = 0;
-    const cartesianChartRef = React.useRef(null);
-    const _legendsRef = React.useRef(null);
+    const { cartesianChartRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend);
     const [color, setColor] = React.useState('');
     const [dataForHoverCard, setDataForHoverCard] = React.useState(0);
     const [activeLegend, setActiveLegend] = React.useState(undefined);
@@ -68,17 +65,6 @@ const MIN_DOMAIN_MARGIN = 8;
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
     const [selectedLegends, setSelectedLegends] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
     const prevPropsRef = React.useRef(null);
-    React.useImperativeHandle(props.componentRef, ()=>{
-        var _cartesianChartRef_current;
-        var _cartesianChartRef_current_chartContainer;
-        return {
-            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null,
-            toImage: (opts)=>{
-                var _cartesianChartRef_current, _legendsRef_current;
-                return toImage((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, _useRtl, opts);
-            }
-        };
-    }, []);
     React.useEffect(()=>{
         if (prevPropsRef.current) {
             var _prevProps_legendProps, _props_legendProps;
@@ -531,31 +517,8 @@ const MIN_DOMAIN_MARGIN = 8;
                 tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined,
                 opacity: shouldHighlight ? 1 : 0.1,
                 rx: props.roundCorners ? 3 : 0
-            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative));
+            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative, point.barLabel));
         });
-        // Removing un wanted tooltip div from DOM, when prop not provided.
-        if (!props.showXAxisLablesTooltip) {
-            try {
-                // eslint-disable-next-line no-restricted-globals
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-        }
-        // Used to display tooltip at x axis labels.
-        if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {
-            const xAxisElement = d3Select(xElement).call(xBarScale);
-            try {
-                // eslint-disable-next-line no-restricted-globals
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-            const tooltipProps = {
-                tooltipCls: classes.tooltip,
-                id: _tooltipId,
-                axis: xAxisElement
-            };
-            xAxisElement && tooltipOfAxislabels(tooltipProps);
-        }
         return bars;
     }
     function _createStringBars(containerHeight, containerWidth, xElement) {
@@ -606,32 +569,8 @@ const MIN_DOMAIN_MARGIN = 8;
                 tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined,
                 rx: props.roundCorners ? 3 : 0,
                 opacity: shouldHighlight ? 1 : 0.1
-            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative));
+            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative, point.barLabel));
         });
-        // Removing un wanted tooltip div from DOM, when prop not provided.
-        if (!props.showXAxisLablesTooltip) {
-            try {
-                // eslint-disable-next-line no-restricted-globals
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-        }
-        // Used to display tooltip at x axis labels.
-        if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {
-            const xAxisElement = d3Select(xElement).call(xBarScale);
-            try {
-                // eslint-disable-next-line no-restricted-globals
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-            const tooltipProps = {
-                tooltipCls: classes.tooltip,
-                id: _tooltipId,
-                axis: xAxisElement,
-                showTooltip: props.showXAxisLablesTooltip
-            };
-            xAxisElement && tooltipOfAxislabels(tooltipProps);
-        }
         return bars;
     }
     function _createDateBars(containerHeight, containerWidth, xElement) {
@@ -680,31 +619,8 @@ const MIN_DOMAIN_MARGIN = 8;
                 tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined,
                 rx: props.roundCorners ? 3 : 0,
                 opacity: shouldHighlight ? 1 : 0.1
-            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative));
+            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative, point.barLabel));
         });
-        // Removing un wanted tooltip div from DOM, when prop not provided.
-        if (!props.showXAxisLablesTooltip) {
-            try {
-                // eslint-disable-next-line no-restricted-globals
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-        }
-        // Used to display tooltip at x axis labels.
-        if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {
-            const xAxisElement = d3Select(xElement).call(xBarScale);
-            try {
-                // eslint-disable-next-line no-restricted-globals
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-            const tooltipProps = {
-                tooltipCls: classes.tooltip,
-                id: _tooltipId,
-                axis: xAxisElement
-            };
-            xAxisElement && tooltipOfAxislabels(tooltipProps);
-        }
         return bars;
     }
     function _onLegendHover(legendTitle) {
@@ -809,10 +725,12 @@ const MIN_DOMAIN_MARGIN = 8;
         const lineYValue = ((_point_lineData = point.lineData) === null || _point_lineData === void 0 ? void 0 : _point_lineData.yAxisCalloutData) || ((_point_lineData1 = point.lineData) === null || _point_lineData1 === void 0 ? void 0 : _point_lineData1.y);
         return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ` + (legend ? `${legend}, ` : '') + `${yValue}.` + (typeof lineYValue !== 'undefined' ? ` ${lineLegend}, ${lineYValue}.` : '');
     }
-    function _renderBarLabel(xPoint, yPoint, barValue, legend, isNegativeBar) {
+    function _renderBarLabel(xPoint, yPoint, barValue, legend, isNegativeBar, customBarLabel) {
         if (props.hideLabels || _barWidth < 16 || !(_legendHighlighted(legend) || _noLegendHighlighted())) {
             return null;
         }
+        // Use custom barLabel if provided, otherwise use the formatted barValue
+        const displayLabel = customBarLabel !== undefined ? customBarLabel : typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barValue) : formatScientificLimitWidth(barValue);
         return /*#__PURE__*/ React.createElement("text", {
             x: xPoint + _barWidth / 2,
             y: isNegativeBar ? yPoint + 12 : yPoint - 6,
@@ -823,7 +741,7 @@ const MIN_DOMAIN_MARGIN = 8;
                 direction: 'ltr',
                 unicodeBidi: 'isolate'
             }
-        }, typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barValue) : formatScientificLimitWidth(barValue));
+        }, displayLabel);
     }
     function _getDomainMargins(containerWidth) {
         var _props_data;
@@ -899,6 +817,10 @@ const MIN_DOMAIN_MARGIN = 8;
             right: margins.right + _domainMargin
         };
     }
+    function _getChartTitle() {
+        const { chartTitle, data } = props;
+        return (chartTitle ? `${chartTitle}. ` : '') + `Vertical bar chart with ${(data === null || data === void 0 ? void 0 : data.length) || 0} bars` + (_isHavingLine ? ' and 1 line' : '') + '. ';
+    }
     function _isChartEmpty() {
         return _points.length === 0 || _points.every((point)=>point.y === 0) && !_isHavingLine;
     }
@@ -969,6 +891,7 @@ const MIN_DOMAIN_MARGIN = 8;
     return !_isChartEmpty() ? /*#__PURE__*/ React.createElement(CartesianChart, {
         ...props,
         points: _points,
+        chartTitle: _getChartTitle(),
         chartType: ChartTypes.VerticalBarChart,
         xAxisType: _xAxisType,
         createYAxis: createNumericYAxis,