@sapui5/sap.viz 1.140.0 → 1.141.0

package/src/sap/viz/libs/sap-viz-info-framework.js

@@ -4060,6 +4060,7 @@ define('sap/viz/framework/common/util/Constants',[], function Setup() {
                 DATAPOINTHOVER: "v-datapoint-hover",
                 ZEROVALUEHOVER: "v-datapoint-zero-hover",
                 DATAPOINTSELECTED: "v-datapoint-selected",
+                DATAPOINTDESELECTED: "v-datapoint-deselected",
                 NONINTERACTIVEARIA: "v-m-non-interactive-aria",
                 STACK: "v-stack",
                 LINES_GROUP: "v-lines-group",
@@ -4114,6 +4115,7 @@ define('sap/viz/framework/common/util/Constants',[], function Setup() {
                 LEGEND_BOUND_SELECTION: ".v-m-legend .v-bound",
                 LEGEND_ITEM_BOUND_SELECTION: ".v-legend-item rect:first-child",
                 AXIS_ITEM_BOUND_SELECTION: "rect.viz-axis-label-rect",
+                AXIS_ITEM_BOUND_SELECTION_ACC: "polygon.viz-axis-label-rect",
                 PLOT_BOUND_SELECTION: ".v-plot-bound",
                 PIE_HOVER_STROKE: "v-pie-hover-stroke"
             }
@@ -4260,7 +4262,8 @@ define('sap/viz/framework/common/util/Constants',[], function Setup() {
             VERTICAL_ANGLE: 90,
             SCROLLBAR_NAME: "axisScrollbar",
             HIDDEN_TITLE: {
-                COLOR: "#a6a6a6"
+                COLOR: "#a6a6a6",
+                ACC_COLOR: "sapContent_LabelColor"
             },
             SPACING_TO_ROUGH: 0.05,
             SPACING_TO_ROOT: 0.02,
@@ -4278,7 +4281,8 @@ define('sap/viz/framework/common/util/Constants',[], function Setup() {
             KEY:"title",
             SPACING_WITH_MAIN_TO_ROUGH: 0.08,
             SPACING_MAX_IN_PX: 40,
-            FIX_SPACING_MAX_IN_PX: 16
+            FIX_SPACING_MAX_IN_PX: 16,
+            ARIALEVEL: 2,
         },
         SCROLLBAR :{
             ALIAS: "scrollbar"
@@ -29669,9 +29673,8 @@ define('sap/viz/framework/core/ChartApp',[
         var titleText = (isNonInteractionEnabled ? 'A Noninteractive ' : 'An Interactive ') +
             (chartName || 'Chart');
         rootElement.attr('focusable', true)
-            .attr('tabIndex', -1)
-            .attr('role', 'graphics-object')
-            .attr('aria-roledescription', titleText);        
+            .attr('tabindex', 0)
+            .attr('role', 'graphics-object');
         var textSet = this._propertyMgr.get('title.text');
         var textShow = TitleUtil.getTextShow(textSet);
         titleText += this._propertyMgr.get('title.visible') ? ('. Chart title is ' + textShow + ". ") :' ';
@@ -29679,10 +29682,12 @@ define('sap/viz/framework/core/ChartApp',[
         var accDescription = this._propertyMgr.get('general.accDescription');
         titleText += isNonInteractionEnabled && accDescription ? (accDescription + ". ") : "";
 
-        var titleElement =rootElement.selectAll('.v-m-desc-title').selectAll('title').data([titleText]);
+        var titleElement =rootElement.selectAll('.v-m-desc-title').selectAll('text').data([titleText]);
         var titleId = getChartTitleId(this._chartAppId);
-        titleElement.enter().append('title').attr('id',titleId);
-        titleElement.text(titleText);
+        titleElement.enter().append('text');
+        titleElement.attr('id',titleId).text(titleText).attr('x',20).attr('y', 20).attr('opacity', 0);
+        // x: 20, y:20 --- To position the title text in the SVG.
+        // opacity: 0  --- To make the title text invisible and keep the origin layout.
     };
 
 
@@ -37816,6 +37821,17 @@ define('sap/viz/framework/common/util/NameColorUtils',['sap/viz/framework/common
                     retValue = "#000000";
                 }
                 return retValue;
+            },
+            getNameByColor: function(color) {
+                if (!registered) {
+                    return color;
+                }
+                for (var key in configs) {
+                    if (configs.hasOwnProperty(key) && configs[key] === color) {
+                        return key;
+                    }
+                }
+                return null;
             }
 
         };
@@ -38094,6 +38110,306 @@ define('sap/viz/framework/common/format/UnitFormat',['sap/viz/framework/common/u
         return UnitFormat;
     });
 
+define('sap/viz/framework/common/util/ACCStyleUtils',['sap/viz/framework/common/util/ObjectUtils',
+    'sap/viz/framework/common/util/NameColorUtils'
+],
+    function Setup(ObjectUtils, NameColorUtils) {
+
+        var DEFAULT_THRESHOLD = 3;
+        // Thresholds for different themes and text/non-text elements
+        // Refer to https://www.w3.org/TR/WCAG22/#contrast-ratiodef for details
+        // The values are from internal design guidelines and may be adjusted in the future
+        // when more test results are available.
+        // Note: The theme names must be kept in sync with those in sap.viz.ui5.themes
+        // https://www.sap.com/design-system/fiori-design-web/foundations/visual/theming?external
+        var THRESHOLD_STANDARDS = {
+            HORIZON: {
+                TEXT: 4.5,
+                NON_TEXT: 3.0
+            },
+            HORIZON_DARK: {
+                TEXT: 4.5,
+                NON_TEXT: 3.0
+            },
+            HORIZON_HCB: {
+                TEXT: 7.0,
+                NON_TEXT: 4.5
+            },
+            HORIZON_HCW: {
+                TEXT: 7.0,
+                NON_TEXT: 4.5
+            },
+            FIORI_3: {
+                TEXT: 4.5,
+                NON_TEXT: 3.0
+            },
+            FIORI_3_DARK: {
+                TEXT: 4.5,
+                NON_TEXT: 3.0
+            }
+        };
+        var DEFAULT_BORDER_WIDTH_NAME = 'sapElement_BorderWidth';
+
+        var colorMapping = {
+            // Semantic colors
+            'sapUiChartPaletteSemanticBadLight3': 'sapChart_Sequence_Bad_Plus3',
+            'sapUiChartPaletteSemanticBadLight2': 'sapChart_Sequence_Bad_Plus2',
+            'sapUiChartPaletteSemanticBadLight1': 'sapChart_Sequence_Bad_Plus1',
+            'sapUiChartPaletteSemanticBad': 'sapChart_Sequence_Bad',
+            'sapUiChartPaletteSemanticBadDark1': 'sapChart_Sequence_Bad_Minus1',
+            'sapUiChartPaletteSemanticBadDark2': 'sapChart_Sequence_Bad_Minus2',
+
+            'sapUiChartPaletteSemanticCriticalLight3': 'sapChart_Sequence_Critical_Plus3',
+            'sapUiChartPaletteSemanticCriticalLight2': 'sapChart_Sequence_Critical_Plus2',
+            'sapUiChartPaletteSemanticCriticalLight1': 'sapChart_Sequence_Critical_Plus1',
+            'sapUiChartPaletteSemanticCritical': 'sapChart_Sequence_Critical',
+            'sapUiChartPaletteSemanticCriticalDark1': 'sapChart_Sequence_Critical_Minus1',
+            'sapUiChartPaletteSemanticCriticalDark2': 'sapChart_Sequence_Critical_Minus2',
+
+            'sapUiChartPaletteSemanticGoodLight3': 'sapChart_Sequence_Good_Plus3',
+            'sapUiChartPaletteSemanticGoodLight2': 'sapChart_Sequence_Good_Plus2',
+            'sapUiChartPaletteSemanticGoodLight1': 'sapChart_Sequence_Good_Plus1',
+            'sapUiChartPaletteSemanticGood': 'sapChart_Sequence_Good',
+            'sapUiChartPaletteSemanticGoodDark1': 'sapChart_Sequence_Good_Minus1',
+            'sapUiChartPaletteSemanticGoodDark2': 'sapChart_Sequence_Good_Minus2',
+
+            'sapUiChartPaletteSemanticNeutralLight3': 'sapChart_Sequence_Neutral_Plus3',
+            'sapUiChartPaletteSemanticNeutralLight2': 'sapChart_Sequence_Neutral_Plus2',
+            'sapUiChartPaletteSemanticNeutralLight1': 'sapChart_Sequence_Neutral_Plus1',
+            'sapUiChartPaletteSemanticNeutral': 'sapChart_Sequence_Neutral',
+            'sapUiChartPaletteSemanticNeutralDark1': 'sapChart_Sequence_Neutral_Minus1',
+            'sapUiChartPaletteSemanticNeutralDark2': 'sapChart_Sequence_Neutral_Minus2',
+
+            // Non-semantic and sequential colors
+            'sapUiChartPaletteNoSemDiv1Dark2': 'sapChart_Sequence_12_Plus3',
+            'sapUiChartPaletteNoSemDiv1Dark1': 'sapChart_Sequence_12_Plus2',
+            'sapUiChartPaletteNoSemDiv1': 'sapChart_Sequence_12_Plus1',
+            'sapUiChartPaletteNoSemDiv1Light1': 'sapChart_Sequence_12',
+            'sapUiChartPaletteNoSemDiv1Light2': 'sapChart_Sequence_12_Minus1',
+            'sapUiChartPaletteNoSemDiv1Light3': 'sapChart_Sequence_12_Minus2',
+
+            'sapUiChartPaletteSequentialHue1Light3': 'sapChart_Sequence_1_Plus3',
+            'sapUiChartPaletteSequentialHue1Light2': 'sapChart_Sequence_1_Plus2',
+            'sapUiChartPaletteSequentialHue1Light1': 'sapChart_Sequence_1_Plus1',
+            'sapUiChartPaletteSequentialHue1': 'sapChart_Sequence_1',
+            'sapUiChartPaletteSequentialHue1Dark1': 'sapChart_Sequence_1_Minus1',
+            'sapUiChartPaletteSequentialHue1Dark2': 'sapChart_Sequence_1_Minus2',
+
+            'sapUiChartPaletteSequentialHue2Light3': 'sapChart_Sequence_2_Plus3',
+            'sapUiChartPaletteSequentialHue2Light2': 'sapChart_Sequence_2_Plus2',
+            'sapUiChartPaletteSequentialHue2Light1': 'sapChart_Sequence_2_Plus1',
+            'sapUiChartPaletteSequentialHue2': 'sapChart_Sequence_2',
+            'sapUiChartPaletteSequentialHue2Dark1': 'sapChart_Sequence_2_Minus1',
+            'sapUiChartPaletteSequentialHue2Dark2': 'sapChart_Sequence_2_Minus2',
+
+            'sapUiChartPaletteSequentialHue3Light3': 'sapChart_Sequence_3_Plus3',
+            'sapUiChartPaletteSequentialHue3Light2': 'sapChart_Sequence_3_Plus2',
+            'sapUiChartPaletteSequentialHue3Light1': 'sapChart_Sequence_3_Plus1',
+            'sapUiChartPaletteSequentialHue3': 'sapChart_Sequence_3',
+            'sapUiChartPaletteSequentialHue3Dark1': 'sapChart_Sequence_3_Minus1',
+            'sapUiChartPaletteSequentialHue3Dark2': 'sapChart_Sequence_3_Minus2',
+
+            'sapUiChartPaletteSequentialHue6Light3': 'sapChart_Sequence_6_Plus3',
+            'sapUiChartPaletteSequentialHue6Light2': 'sapChart_Sequence_6_Plus2',
+            'sapUiChartPaletteSequentialHue6Light1': 'sapChart_Sequence_6_Plus1',
+            'sapUiChartPaletteSequentialHue6': 'sapChart_Sequence_6',
+            'sapUiChartPaletteSequentialHue6Dark1': 'sapChart_Sequence_6_Minus1',
+            'sapUiChartPaletteSequentialHue6Dark2': 'sapChart_Sequence_6_Minus2',
+
+            'sapUiChartPaletteSequentialNeutralLight3': 'sapChart_Sequence_Neutral_Plus3',
+            'sapUiChartPaletteSequentialNeutralLight2': 'sapChart_Sequence_Neutral_Plus2',
+            'sapUiChartPaletteSequentialNeutralLight1': 'sapChart_Sequence_Neutral_Plus1',
+            'sapUiChartPaletteSequentialNeutral': 'sapChart_Sequence_Neutral',
+            'sapUiChartPaletteSequentialNeutralDark1': 'sapChart_Sequence_Neutral_Minus1',
+            'sapUiChartPaletteSequentialNeutralDark2': 'sapChart_Sequence_Neutral_Minus2',
+
+            // qualitative palette
+            'sapUiChartPaletteQualitativeHue1': 'sapChart_Sequence_1',
+            'sapUiChartPaletteQualitativeHue2': 'sapChart_Sequence_2',
+            'sapUiChartPaletteQualitativeHue3': 'sapChart_Sequence_3',
+            'sapUiChartPaletteQualitativeHue4': 'sapChart_Sequence_4',
+            'sapUiChartPaletteQualitativeHue5': 'sapChart_Sequence_5',
+            'sapUiChartPaletteQualitativeHue6': 'sapChart_Sequence_6',
+            'sapUiChartPaletteQualitativeHue7': 'sapChart_Sequence_7',
+            'sapUiChartPaletteQualitativeHue8': 'sapChart_Sequence_8',
+            'sapUiChartPaletteQualitativeHue9': 'sapChart_Sequence_9',
+            'sapUiChartPaletteQualitativeHue10': 'sapChart_Sequence_10',
+            'sapUiChartPaletteQualitativeHue11': 'sapChart_Sequence_11',
+            'sapUiChartPaletteQualitativeHue12': 'sapChart_Sequence_1_Minus2',
+            'sapUiChartPaletteQualitativeHue13': 'sapChart_Sequence_2_Minus2',
+            'sapUiChartPaletteQualitativeHue14': 'sapChart_Sequence_3_Minus2',
+            'sapUiChartPaletteQualitativeHue15': 'sapChart_Sequence_4_Minus2',
+            'sapUiChartPaletteQualitativeHue16': 'sapChart_Sequence_5_Minus2',
+            'sapUiChartPaletteQualitativeHue17': 'sapChart_Sequence_6_Minus2',
+            'sapUiChartPaletteQualitativeHue18': 'sapChart_Sequence_7_Minus2',
+            'sapUiChartPaletteQualitativeHue19': 'sapChart_Sequence_8_Minus2',
+            'sapUiChartPaletteQualitativeHue20': 'sapChart_Sequence_9_Minus2',
+            'sapUiChartPaletteQualitativeHue21': 'sapChart_Sequence_10_Minus2',
+            'sapUiChartPaletteQualitativeHue22': 'sapChart_Sequence_11_Minus2'
+        };
+        var themeMapping = {
+            "sap_horizon_fiori__merged_with_cvom_by_vizframe[]": "HORIZON",
+            "sap_horizon_dark_fiori__merged_with_cvom_by_vizframe[]": "HORIZON_DARK",
+            "sap_horizon_hcb_fiori__merged_with_cvom_by_vizframe[]": "HORIZON_HCB",
+            "sap_horizon_hcw_fiori__merged_with_cvom_by_vizframe[]": "HORIZON_HCW",
+            "sap_fiori_3_fiori__merged_with_cvom_by_vizframe[]": "FIORI_3",
+            "sap_fiori_3_dark_fiori__merged_with_cvom_by_vizframe[]": "FIORI_3_DARK"
+        };
+
+        var configs = {};
+        var registered = false;
+
+        function stringIncludes(str, sub) {
+            return str.indexOf(sub) > -1;
+        }
+
+        // A helper function to find the color category from the specific name.
+        // e.g., 'sapChart_Sequence_Bad_Plus3' -> 'Bad'
+        // 'sapChart_Sequence_1_Plus3' -> '1'
+        function getColorCategoryFromSpecificName(specificName) {
+            if (!specificName || specificName.indexOf("sapChart_Sequence_") !== 0) {
+                return null;
+            }
+
+            // Remove the prefix
+            var part = specificName.substring("sapChart_Sequence_".length);
+
+            // Find the category part.
+            if (part.indexOf("_") !== -1) {
+                // e.g., 'Bad_Plus3' -> 'Bad'
+                // '12_Plus3' -> '12'
+                var category = part.substring(0, part.indexOf("_"));
+                return category;
+            } else {
+                // Handle cases like 'sapChart_Sequence_Bad'
+                return part;
+            }
+        }
+
+
+        var ACCStyleUtils = {
+            constructor: function () {
+                return;
+            },
+            register: function (obj) {
+                registered = true;
+                configs = ObjectUtils.extendByRepalceArray(true, null, configs, obj);
+                return ACCStyleUtils;
+            },
+            getAccStyle: function (cssName) {
+                if (!registered) {
+                    return cssName;
+                }
+                return configs.hasOwnProperty(cssName) ? configs[cssName] : cssName;
+            },
+            convertColor: function (color) {
+                return this.getAccStyle(color);
+            },
+            getNameByColor: function (color) {
+                return NameColorUtils.getNameByColor(color);
+            },
+            _resolveColorMapping: function (cssName) {
+                if (!registered || !cssName) {
+                    return null;
+                }
+                var lookupKey = cssName;
+                if (!stringIncludes(lookupKey, 'sap')) {
+                    var resolvedName = this.getNameByColor(lookupKey);
+                    if (resolvedName) {
+                        lookupKey = resolvedName;
+                    }
+                }
+                return colorMapping[lookupKey];
+            },
+            getBorderColorName: function (cssName) {
+                if (!registered) {
+                    return cssName;
+                }
+                var specificColorName = this._resolveColorMapping(cssName);
+
+                if (!specificColorName) {
+                    return null;
+                }
+                var colorCategory = getColorCategoryFromSpecificName(specificColorName);
+                if (!colorCategory) {
+                    return null;
+                }
+                return 'sapChart_Sequence_' + colorCategory + '_BorderColor';
+            }, 
+
+            // The getBorderColor function remains the same, as it relies on getBorderColorName
+            getBorderColor: function (cssName) {
+                var borderColorName = this.getBorderColorName(cssName);
+
+                if (!borderColorName || borderColorName === cssName) {
+                    return cssName;
+                }
+
+                return this.convertColor(borderColorName);
+            },
+            getBorderWidth: function (cssName) {
+                if (!registered) {
+                    return cssName;
+                }
+                if (!cssName) {
+                    cssName = DEFAULT_BORDER_WIDTH_NAME;
+                }
+                var width = this.getAccStyle(cssName);
+                if (typeof width === 'string' && stringIncludes(width, 'rem')) {
+                    var index = width.indexOf('rem');
+                    var remValue = parseFloat(width.substring(0, index));
+
+                    if (!isNaN(remValue)) {
+                        var rootFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+                        return remValue * rootFontSize + 'px';
+                    }
+                }
+                return width;
+            },
+            getTextColor: function (cssName) {
+                var mappedName = this._resolveColorMapping(cssName);
+                if (mappedName) {
+                    return this.convertColor(mappedName + '_TextColor');
+                }
+                return cssName;
+            },
+            getTextShadowStyle: function (cssName) {
+                var mappedName = this._resolveColorMapping(cssName);
+                if (mappedName) {
+                    return this.getAccStyle(mappedName + '_TextShadow');
+                }
+                return cssName;
+            },
+            getTheme: function (themeName) {
+                if (!registered) {
+                    return themeName;
+                }
+                return themeMapping[themeName];
+            },
+            getThreshold: function (theme, chartType, textVisible) {
+                if (!registered) {
+                    return DEFAULT_THRESHOLD;
+                }
+                var chart = ['info/stacked_bar',
+                    'info/stacked_column',
+                    'info/100_stacked_bar',
+                    'info/100_stacked_column',
+                    'info/heatmap'];
+                var isHighContrast = false;
+                if (chart.indexOf(chartType) >= 0 && textVisible) {
+                    isHighContrast = true;
+                }
+                if (theme && THRESHOLD_STANDARDS[theme]) {
+                    return isHighContrast ? THRESHOLD_STANDARDS[theme].TEXT : THRESHOLD_STANDARDS[theme].NON_TEXT;
+                }
+                // fallback to default threshold when theme is missing or unknown
+                return DEFAULT_THRESHOLD;
+            }
+        };
+
+        return ACCStyleUtils;
+    });
+
 define('sap/viz/api/env',[
     'sap/viz/framework/core/env',
     'sap/viz/framework/core/config',
@@ -38103,8 +38419,9 @@ define('sap/viz/api/env',[
     'sap/viz/framework/common/lang/LangManager',
     'sap/viz/framework/common/util/NameColorUtils',
     'sap/viz/framework/common/format/UnitFormat',
+    'sap/viz/framework/common/util/ACCStyleUtils',
     'exports'
-], function Setup(environment, config, TypeUtils, ObjectUtils, Logger, langManager, NameColorUtils, UnitFormat) {
+], function Setup(environment, config, TypeUtils, ObjectUtils, Logger, langManager, NameColorUtils, UnitFormat, ACCStyleUtils) {
     var env =
         /**
          * sap.viz.api.env
@@ -38148,6 +38465,9 @@ define('sap/viz/api/env',[
                     if (values.colorMapping && TypeUtils.isPlainObject(values.colorMapping)){
                         NameColorUtils.register(values.colorMapping);
                     }
+                    if (values.accStyleMapping && TypeUtils.isPlainObject(values.accStyleMapping)) {
+                        ACCStyleUtils.register(values.accStyleMapping);
+                    }
                     if (values.useLatestFormatPrefix && values.useLatestFormatPrefix === true) {
                         UnitFormat.register({"useLatestFormatPrefix" : true});
                     }

package/src/sap/viz/resources/chart/templates/standard_fiori/template.js

@@ -190,7 +190,8 @@
                 enablement: 'enabled',
                 direction: 'categoryAxis'
             },
-            enableKeyboard: true
+            enableKeyboard: true,
+            enableAccUpdates: true
         }
     };
 
@@ -435,6 +436,9 @@
                     }
                 }
             }
+        },
+        interaction : {
+            enableAccUpdates: true
         }
     });
 
@@ -504,6 +508,9 @@
                     color: "#000000"
                 }
             }
+        },
+        interaction: {
+            enableAccUpdates: true
         }
     };
 
@@ -515,6 +522,9 @@
                     color: "#000000"
                 }
             }
+        },
+        interaction: {
+            enableAccUpdates: true
         }
     });
 
@@ -618,11 +628,17 @@
             'viz/dual_horizontal_combination': dualhorizontalcombinationEffect,
             'viz/boxplot': merge(base, {
                 yAxis: merge(axis, hideAxisLine, verticalGridline),
-                xAxis: axis
+                xAxis: axis,
+                interaction: {
+                    enableAccUpdates: false
+                }
             }),
             'viz/horizontal_boxplot': merge(base, {
                 xAxis: merge(axis, hideAxisLine, gridline),
-                yAxis: axis
+                yAxis: axis,
+                interaction: {
+                    enableAccUpdates: false
+                }
             }),
             'viz/waterfall': merge(base, {
                 yAxis: merge(axis, hideAxisLine, verticalGridline),
@@ -703,6 +719,9 @@
                         visible: true
                     },
                     color: axisColor
+                },
+                interaction: {
+                    enableAccUpdates: true
                 }
             },
             'viz/treemap': vizTreemapEffect,
@@ -852,7 +871,8 @@
                             width: 2,
                             color: "#666666"
                         }
-                    }
+                    },
+                    enableAccUpdates: true
                 }
             })
         },

package/src/sap/viz/themes/base/shared.less

@@ -260,6 +260,12 @@ html.sap-desktop .viz-controls-chartPopover .sapMList.viz-controls-chartPopover-
 html.sap-desktop .viz-controls-chartPopover .viz-controls-chartPopover-subActionItemsPage .sapMList .sapMLIB.sapMALI .sapMLIBContent{
   padding: 0 1rem;
 }
+html.sap-desktop .viz-controls-chartPopover .sapMList.viz-controls-chartPopover-actionList .sapMLIB.sapMALI{
+  padding: 0;
+}
+html.sap-desktop .viz-controls-chartPopover .viz-controls-chartPopover-subActionItemsPage .sapMLIB.sapMALI{
+  padding: 0;
+}
 
 .viz-controls-chartPopover .viz-controls-chartPopover-actionList li:first-child{
   border-top: 1px rgb(229, 229, 229) solid;
@@ -459,7 +465,7 @@ html[dir=rtl] .viz-controls-chartPopover .viz-controls-chartPopover-measure-valu
     left: 1px;
     right: 1px;
     bottom: 1px;
-    border: @sapUiChartFocusWidth dotted @sapUiContentFocusColor;
+    border: @sapUiChartFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
     pointer-events: none
 }
 
@@ -471,6 +477,14 @@ html[dir=rtl] .viz-controls-chartPopover .viz-controls-chartPopover-measure-valu
     outline: none;
 }
 
+/* Css for scatter chart data point opacity */
+.v-datapoint{
+  path:first-child[class]{
+    opacity: 0.8;
+  }
+}
+
+
 /* ============================= */
 /* CSS for control sap.m/Slider  */
 /* Base theme                    */

package/src/sap/viz/ui5/controls/chartpopover/ContentPanel.js

@@ -188,7 +188,7 @@ function(
                 }).addStyleClass('viz-controls-chartPopover-measure-labels viz-controls-chartPopover-measure-labels-wrapper-name'));
             }
             valueLabel = new ObjectNumber({
-                number: item.value,
+                number: item.value == null ? this._getNoValueLabel() : item.value,
                 unit: item.unit,
                 textAlign: TextAlign.Begin
             }).addStyleClass('viz-controls-chartPopover-measure-labels viz-controls-chartPopover-measure-labels-wrapper-value');

package/src/sap/viz/ui5/core/BaseChartMetadata.js

@@ -17,7 +17,7 @@ sap.ui.define(['sap/ui/core/ElementMetadata'],
 	 *
 	 * @class
 	 * @author SAP SE
-	 * @version 1.140.0
+	 * @version 1.141.0
 	 * @since 1.30.0
 	 * @alias sap.viz.ui5.core.BaseChartMetadata
 	 */