@sapui5/sap.viz 1.141.2 → 1.143.0

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

@@ -4299,7 +4299,6 @@ define('sap/viz/chart/components/util/ColorUtil',["sap/viz/framework/common/util
 
     return ColorUtil;
 });
-
 define('sap/viz/chart/components/plots/PlotHelper',[
     'jquery'
 
@@ -7621,7 +7620,7 @@ define('sap/viz/chart/components/legend/ColorLegend',[
             var retWidth = 0;
             if (isHorizontal) {
                 if(!isScrollable && showFullLegend){
-                    retWidth = expectedWidth + markerWidth + markerMargin.right * textHeight + HORIZONTAL_OFFSET;
+                    retWidth = expectedWidth + markerWidth + markerMargin.right * textHeight + HORIZONTAL_OFFSET*2;
                 }else{
                     var regularItemWidth = eachItemWidth + HORIZONTAL_OFFSET - markerMargin.right * textHeight;
 
@@ -10130,8 +10129,8 @@ return {
         "interaction.hover.stroke.visible": true,
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
-        "interaction.keyboard.width": "1px",
         "interaction.keyboard.style": "solid",
+        "interaction.keyboard.width": "1px",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -10361,8 +10360,8 @@ return {
         "interaction.hover.stroke.visible": true,
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
-        "interaction.keyboard.width": "1px",
         "interaction.keyboard.style": "solid",
+        "interaction.keyboard.width": "1px",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -10625,8 +10624,8 @@ return {
         "interaction.hover.stroke.visible": true,
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
-        "interaction.keyboard.width": "1px",
         "interaction.keyboard.style": "solid",
+        "interaction.keyboard.width": "1px",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.behavior": {
             "access": "internal",
@@ -10802,8 +10801,8 @@ return {
         "interaction.hover.stroke.visible": true,
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
-        "interaction.keyboard.width": "1px",
         "interaction.keyboard.style": "solid",
+        "interaction.keyboard.width": "1px",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.behavior": {
             "access": "internal",
@@ -11064,8 +11063,8 @@ return {
         "interaction.hover.stroke.visible": true,
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
-        "interaction.keyboard.width": "1px",
         "interaction.keyboard.style": "solid",
+        "interaction.keyboard.width": "1px",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -12193,8 +12192,8 @@ return {
         "interaction.hover.stroke.visible": true,
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
-        "interaction.keyboard.width": "1px",
         "interaction.keyboard.style": "solid",
+        "interaction.keyboard.width": "1px",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -14204,8 +14203,8 @@ return {
         "interaction.hover.stroke.visible": true,
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
-        "interaction.keyboard.width": "1px",
         "interaction.keyboard.style": "solid",
+        "interaction.keyboard.width": "1px",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -14804,8 +14803,8 @@ return {
         "interaction.hover.stroke.visible": true,
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
-        "interaction.keyboard.width": "1px",
         "interaction.keyboard.style": "solid",
+        "interaction.keyboard.width": "1px",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -15198,8 +15197,8 @@ return {
         "interaction.hover.stroke.visible": true,
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
-        "interaction.keyboard.width": "1px",
         "interaction.keyboard.style": "solid",
+        "interaction.keyboard.width": "1px",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -16633,8 +16632,8 @@ return {
         "interaction.hover.stroke.visible": true,
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
-        "interaction.keyboard.width": "1px",
         "interaction.keyboard.style": "solid",
+        "interaction.keyboard.width": "1px",
         "interaction.noninteractiveMode": false,
         "interaction.selectByTimeAxisGroup": {
             "access": "internal",
@@ -16946,8 +16945,8 @@ return {
         "interaction.hover.stroke.visible": true,
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
-        "interaction.keyboard.width": "1px",
         "interaction.keyboard.style": "solid",
+        "interaction.keyboard.width": "1px",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -17236,8 +17235,8 @@ return {
         "interaction.hover.stroke.visible": true,
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
-        "interaction.keyboard.width": "1px",
         "interaction.keyboard.style": "solid",
+        "interaction.keyboard.width": "1px",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -18201,9 +18200,9 @@ define('sap/viz/chart/behavior/config/handler/AxisBehaviorHandler',[
             return;
         }
 
-        var color;
         var lineColor = service.getProperties().get("interaction.selected.stroke.color");
         var outlineWidth = service.getProperties().get("interaction.keyboard.width");
+        var color;
 
         if(isTriggerable(service)) {
             var radar = service._getChartType().toLowerCase() === 'radar';
@@ -18214,7 +18213,7 @@ define('sap/viz/chart/behavior/config/handler/AxisBehaviorHandler',[
             }
 
             color = service.getProperties().get(axisName+".mouseDownShadow.color");
-           
+            
         }
         else if(isTimeAxisTriggerable(service)) {
             color = service.getProperties().get("timeAxis"+".mouseDownShadow.color");
@@ -18222,14 +18221,11 @@ define('sap/viz/chart/behavior/config/handler/AxisBehaviorHandler',[
         else {
             return;
         }
-
         service.getNodes(service.NodeType.AXIS_ITEM_BACKGROUND)
         .attr("fill", "transparent")
         .classed(CSS_CLASS.HOVER_SHADOW, false);
-
-        var label_selector = service.NodeType.AXIS_ITEM_BACKGROUND.get('value');
-
         if (color) {
+            var label_selector = service.NodeType.AXIS_ITEM_BACKGROUND.get('value');
             d3.select(event.data.currentTarget).select(label_selector)
             .attr("fill", color)
             .classed(CSS_CLASS.FOCUS_SHADOW, true)
@@ -18250,7 +18246,7 @@ define('sap/viz/chart/behavior/config/handler/AxisBehaviorHandler',[
             if(radar){
                 axisName = 'plotArea.polarAxis'; 
             }
-            
+
             color = service.getProperties().get(axisName+".hoverShadow.color");
         }
         else if(isTimeAxisTriggerable(service)) {
@@ -18444,6 +18440,117 @@ define('sap/viz/chart/behavior/config/HighlightHelper',[
         return TypeUtils.isArray(elem) ? elem : [elem];
     }
 
+    function drawInnerStroke(service, e, selector, mode, prop, defaultWidth, selectAll, extraData) {
+        var strokeStyle = service.getProperties().get("interaction.keyboard.style");
+        var zeroHoverNode = d3.select('.' + Constants.CSS.CLASS.ZEROVALUEHOVER).node();
+        var child = d3.select(e).selectAll(selector);
+
+        if (TypeUtils.isExist(zeroHoverNode) && TypeUtils.isExist(extraData)) {
+            if (extraData.isZeroOnFirstTab) {
+                child = d3.select(zeroHoverNode).selectAll(selector);
+            }
+        }
+
+        if (!selectAll && child && child[0] && child[0].length > 1) {
+            var temp = child[0];
+            child = d3.select(temp[temp.length - 1]);
+        }
+
+        var isZeroValue = TypeUtils.isExist(extraData) ? extraData.isZeroValue : false;
+        if (!isZeroValue) {
+            child.attr("stroke-dasharray", undefined);
+        }
+
+        var rect = child.node();
+        if (!rect) {
+            return;
+        }
+
+        var rawWidth = getWidth((prop && prop.width), defaultWidth);
+        var numericWidth = parseFloat(rawWidth);
+        var strokeWidth = (isNaN(numericWidth) ? 2 : numericWidth) * 2;
+
+        if (rect.tagName && rect.tagName.toLowerCase() !== "rect") {
+            if (prop && prop.visible === true) {
+                drawStroke(service, e, selector, prop, defaultWidth, selectAll, extraData);
+            } else {
+                var fillColorFallback = getColors(service, e, prop && prop.color);
+                d3.select(e).selectAll(selector)
+                    .attr("stroke", null)
+                    .attr("stroke-width", null)
+                    .attr("stroke-dasharray", null)
+                    .attr("clip-path", null)
+                    .attr("fill",
+                        fillColorFallback &&
+                        (
+                            fillColorFallback.customizedColor ||
+                            fillColorFallback.defaultColor
+                        )
+                    );
+            }
+            return;
+        }
+
+        var width = parseFloat(child.attr("width"));
+        var height = parseFloat(child.attr("height"));
+        var dataId = d3.select(e).attr("data-datapoint-id") || Math.random().toString(36).slice(2);
+        var clipId = "inner-stroke-clip-" + mode + "-" + dataId;
+
+        var svg = d3.select(e.ownerSVGElement || e.closest("svg"));
+        var defs = svg.select("defs");
+        if (defs.empty()) {
+            defs = svg.append("defs");
+        }
+
+        if (prop && prop.visible === true) {
+            var currentClip = child.attr("clip-path");
+            if (currentClip && currentClip.indexOf("inner-stroke-clip-") === 0 && currentClip.indexOf(mode) === -1) {
+                return;
+            }
+
+            var clipPath = defs.select("#" + clipId);
+            if (clipPath.empty()) {
+                clipPath = defs.append("clipPath").attr("id", clipId);
+                clipPath.append("rect");
+            }
+
+            clipPath.select("rect")
+                .attr("x", 0.5)
+                .attr("y", 0.5)
+                .attr("width", Math.max(0, width - 1))
+                .attr("height", Math.max(0, height - 1));
+
+            var strokeColor = getColors(service, e, prop.color);
+            child
+                .attr("stroke", strokeColor.customizedColor || strokeColor.defaultColor)
+                .attr("stroke-width", strokeWidth)
+                .attr("clip-path", "url(#" + clipId + ")")
+                .style("outline", "none");
+
+            if (mode === 'keyboard') {
+                if (strokeStyle === "solid") {
+                    child.attr("stroke-dasharray", null);
+                } else if (strokeStyle === "dotted") {
+                    child.attr("stroke-dasharray", strokeWidth);
+                } else {
+                    child.attr("stroke-dasharray", strokeWidth);
+                }
+            } else {
+                child.attr("stroke-dasharray", null);
+            }
+        } else {
+            
+            var fillColor = getColors(service, e, prop.color);
+            d3.select(e).selectAll(selector)
+                .attr("stroke", null)
+                .attr("stroke-width", null)
+                .attr("clip-path", null)
+                .attr("stroke-dasharray", null)
+                .attr("fill", fillColor.customizedColor || fillColor.defaultColor);
+            defs.select("#inner-stroke-clip-" + mode + "-" + dataId).remove();
+        }
+    }
+
     function drawStroke(service, e, selector, prop, defaultWidth, selectAll, extraData) {
         var zeroHoverNode = d3.select('.' + Constants.CSS.CLASS.ZEROVALUEHOVER).node();
         var child = d3.select(e).selectAll(selector);
@@ -18556,16 +18663,85 @@ define('sap/viz/chart/behavior/config/HighlightHelper',[
         return null;
     }
 
+    function setRectCache(e, rectCache) {
+        var dataId = DataPointUtils.getDataPointId(e);
+        if (!rectCache[dataId]) {
+            rectCache[dataId] = e.innerHTML;
+        }
+    }
+    function getRectCache(e, rectCache) {
+        var dataId = DataPointUtils.getDataPointId(e);
+        return rectCache[dataId];
+    }
+    function resetRectCache(rectCache) {
+        for (var key in rectCache) {
+            if (rectCache.hasOwnProperty(key)) {
+                delete rectCache[key];
+            }
+        }
+    }
+
+    function mergeRectContent(e, rectCache) {
+        var currentRectHTML = e.innerHTML;
+        var cachedRectHTML = getRectCache(e, rectCache);
+        var mergedHTML = mergeHTMLContent(cachedRectHTML, currentRectHTML);
+        e.innerHTML = mergedHTML;
+    }
+
+    function mergeHTMLContent(cachedHTML, currentHTML) {
+        if (!cachedHTML) {
+            return currentHTML;
+        }
+        var tempDiv = document.createElement('div');
+        tempDiv.innerHTML = cachedHTML;
+
+        var currentDiv = document.createElement('div');
+        currentDiv.innerHTML = currentHTML;
+
+        var cachedRect = tempDiv.querySelector('rect');
+        var currentRect = currentDiv.querySelector('rect');
+
+        if (cachedRect && currentRect) {
+            var mergedRect = cachedRect.cloneNode(true);
+            var styleAttributes = ['stroke', 'stroke-width', 'fill', 'fill-opacity', 'stroke-opacity', 'opacity'];
+            styleAttributes.forEach(function (attr) {
+                if (currentRect.hasAttribute(attr)) {
+                    mergedRect.setAttribute(attr, currentRect.getAttribute(attr));
+                }
+            });
+            tempDiv.replaceChild(mergedRect, cachedRect);
+        }
+        var cachedG = tempDiv.querySelector('g');
+        var currentG = currentDiv.querySelector('g');
+
+        if (cachedG && currentG) {
+            var mergedG = cachedG.cloneNode(true);
+            var gStyleAttributes = ['fill-opacity'];
+            gStyleAttributes.forEach(function (attr) {
+                if (currentG.hasAttribute(attr)) {
+                    mergedG.setAttribute(attr, currentG.getAttribute(attr));
+                }
+            });
+            tempDiv.replaceChild(mergedG, cachedG);
+        }
+        return tempDiv.innerHTML;
+    }
+
     var helper = {
         transformColor: transformColor,
         turnToArray: turnToArray,
         getColors : getColors,
         drawStroke : drawStroke,
+        drawInnerStroke : drawInnerStroke,
         drawFill : drawFill,
         getWidth : getWidth,
         getDeselAllExTargets: getDeselAllExTargets,
         getLayerCoord: getLayerCoord,
-        tryToFindNode: tryToFindNode
+        tryToFindNode: tryToFindNode,
+        setRectCache: setRectCache,
+        getRectCache: getRectCache,
+        resetRectCache: resetRectCache,
+        mergeRectContent: mergeRectContent,
     };
 
     return helper;
@@ -20592,6 +20768,48 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
 
     var getColors = HighlightHelper.getColors;
 
+    var rectCache = {};
+
+    function checkColorContrast(fill, bgcolor, threshold) {
+        if (fill && bgcolor) {
+            var ratioObj = ColorUtil.checkColorContrast(bgcolor, fill, threshold);
+            if (!ratioObj.meetsThreshold) {
+                var stroke = ACCStyleUtils.getBorderColor(fill);
+                return stroke;
+            }
+        }
+        return null;
+    }
+    function hasPropCustomizeValue(propsMgr, propName) {
+        return propsMgr._props[propName].hasOwnProperty('customizeValue');
+    }
+    function hasPropValue(propsMgr, propName) {
+        return propsMgr._props[propName].hasOwnProperty('value');
+    }
+ 
+    function getStrokeColor(service, extraData) {
+        var propMgr = service.getProperties();
+        var strokeColor = "plotArea.dataPoint.stroke.color";
+        var strokeVisible = "plotArea.dataPoint.stroke.visible";
+ 
+        if(hasPropCustomizeValue(propMgr, strokeColor) || hasPropValue(propMgr, strokeColor)) {
+            return propMgr.get(strokeColor);
+        }
+        var BGCOLORPROPS = ["plotArea.grid.background.color",
+            "plotArea.background.color",
+            "general.background.color"];
+        var textVisible = propMgr.get('plotArea.dataLabel.visible');
+        var template = service.getEffectManager()._getTemplate().name;
+        var theme = ACCStyleUtils.getTheme(template);
+        var chartType = service._getChartType();
+        var threshold = ACCStyleUtils.getThreshold(theme, chartType, textVisible);
+        var bgcolor = ColorUtil.getBgColor(propMgr,
+            propMgr.get(strokeVisible) ? BGCOLORPROPS.concat(strokeColor) : BGCOLORPROPS);
+       
+        var stroke = checkColorContrast(extraData.color, bgcolor, threshold);
+        return stroke? stroke : propMgr.get(strokeColor);
+    }
+
     function getShape(plot, dataPoint){
         return plot && plot.getDataPointShape && plot.getDataPointShape(dataPoint);
     }
@@ -21272,13 +21490,21 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
         var prop = properties.get('interaction.selected');
         var isMarkerRenderExist = TypeUtils.isExist(properties.get('plotArea.markerRenderer'));
         var lineRenderer;
+        var isAccEnable = properties.get("interaction.enableAccUpdates");
         elements.forEach(function(e) {
             var extraData = DataGraphics.getData(e);
             var bSetChildOpacity = !extraData.isZeroValue;
             DataPointUtils.highlight(e);
             lineRenderer = Handler.getLineRenderer(service, e);
             Handler.renderLightLine(service, e, true, lineRenderer);
-            HighlightHelper.drawStroke(service, e, 'path, rect', prop.stroke, 1, undefined, extraData);
+            if (isAccEnable) {
+                HighlightHelper.drawInnerStroke(
+                    service, e, 'rect, path', 'select', prop.stroke,
+                    DataGraphics.getData(e).strokeWidth, false, DataGraphics.getData(e)
+                );
+            } else {
+                HighlightHelper.drawStroke(service, e, 'path, rect', prop.stroke, 1, undefined, extraData);
+            }
             HighlightHelper.drawFill(service, e, 'path, rect', prop, isMarkerRenderExist, bSetChildOpacity);
         });
     };
@@ -21318,21 +21544,46 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
     };
 
     Handler.selectOnBarOnNormalMode = function(event, service){
+        var isAccEnable = service.getProperties().get("interaction.enableAccUpdates");
         var elements = HighlightHelper.turnToArray(event.data.targets);
         var properties = service.getProperties();
         service._getDecorationLayer().clear();
         service.fireEvent(event, true);
         var prop = properties.get('interaction.selected');
         var isMarkerRendererExist = TypeUtils.isExist(properties.get('plotArea.markerRenderer'));
-        elements.forEach(function(e) {
-            var extraData = DataGraphics.getData(e);
-            var tag = "rect";
-            if (extraData.pattern === "noFill") {
-                tag = "rect, path";
-            }
-            HighlightHelper.drawStroke(service, e, 'rect', prop.stroke, 1, undefined, extraData);
-            HighlightHelper.drawFill(service, e, tag, prop, isMarkerRendererExist);
-        });
+        if (!isAccEnable) {
+            elements.forEach(function (e) {
+                var extraData = DataGraphics.getData(e);
+                var tag = "rect";
+                if (extraData.pattern === "noFill") {
+                    tag = "rect, path";
+                }
+                HighlightHelper.drawStroke(service, e, 'rect', prop.stroke, 1, undefined, extraData);
+                HighlightHelper.drawFill(service, e, tag, prop, isMarkerRendererExist);
+            });
+        } else {
+            elements.forEach(function (e) {
+                var extraData = DataGraphics.getData(e);
+                var tag = extraData.pattern === "noFill" ? "rect, path" : "rect";
+
+
+                var strokeProp = {};
+                for (var key in prop.stroke) {
+                    if (prop.stroke.hasOwnProperty(key)) {
+                        strokeProp[key] = prop.stroke[key];
+                    }
+                }
+                strokeProp.isSelect = true;
+                
+                HighlightHelper.drawInnerStroke(
+                    service, e, 'rect', "select", strokeProp,
+                    extraData.strokeWidth, false, extraData
+                );
+
+
+                HighlightHelper.drawFill(service, e, tag, prop, isMarkerRendererExist);
+            });
+        }
     };
 
     Handler.highlightOnCombDuringBigData = function (event, service) {
@@ -21589,6 +21840,7 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
 
         var plot = service.getModule("main.plot");
         var dataModel = service.getDataModel();
+        var isAccEnable = service.getProperties().get("interaction.enableAccUpdates");
         
         elements.forEach(function (e) {
             if(service.isTrellis()){
@@ -21598,15 +21850,49 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
             }else{
                 var dataId = DataPointUtils.getDataPointId(e);
                 var dataPoint = dataModel.getDataPoint(dataId);
+                HighlightHelper.setRectCache(e, rectCache);
                 if (dataPoint) {
                     var shape = getShape(plot, dataPoint);
                     if(shape === "line"){
                         HighlightHelper.drawStroke(service, e, 'path, rect', prop.stroke, 2);
                         HighlightHelper.drawFill(service, e, 'path, rect', prop, isMarkerRendererExist, true);
                     } else {
-                        if (!event.data.byKeyboard) {
-                            var extraData = DataGraphics.getData(e);
-                            HighlightHelper.drawStroke(service, e, 'rect', prop.stroke, 2, undefined, extraData);
+                        if (isAccEnable) {
+                            if (!event.data.byKeyboard) {
+                                var strokeProp = {};
+                                for (var key in prop.stroke) {
+                                    if (prop.stroke.hasOwnProperty(key)) {
+                                        strokeProp[key] = prop.stroke[key];
+                                    }
+                                }
+                                strokeProp.isHover = true;
+
+                                HighlightHelper.drawInnerStroke(
+                                    service, e, 'rect', "hover", strokeProp,
+                                    DataGraphics.getData(e).strokeWidth, false, DataGraphics.getData(e)
+                                );
+                            } else {
+                                var keyboardStrokeProp = {};
+                                var keyProp = props.get('interaction.keyboard');
+                                for (var i in keyProp) {
+                                    if (keyProp.hasOwnProperty(i)) {
+                                        keyboardStrokeProp[i] = keyProp[i];
+                                    }
+                                }
+                                keyboardStrokeProp.visible = true;
+                                d3.select(e).select('.v-m-highlight').remove();
+                                HighlightHelper.drawInnerStroke(
+                                    service, e, 'rect', "keyboard", keyboardStrokeProp,
+                                    undefined,
+                                    false,
+                                    undefined
+                                );
+                            }
+                        } else {
+                            if (!event.data.byKeyboard) {
+                                var extraData = DataGraphics.getData(e);
+                                HighlightHelper.drawStroke(service, e, 'rect', prop.stroke, 2, undefined, extraData);
+                            }
                         }
                         HighlightHelper.drawFill(service, e, 'rect, path', prop, isMarkerRendererExist);
                     }
@@ -21639,67 +21925,154 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
         var plot = service.getModule("main.plot");
         var dataModel = service.getDataModel();
         var isAccEnable = service.getProperties().get("interaction.enableAccUpdates");
-        elements.forEach(function (e) {
-            var dataId = DataPointUtils.getDataPointId(e);
-            var dataPoint = dataModel.getDataPoint(dataId);
-            if (dataPoint) {
-                var shape = getShape(plot, dataPoint);
+        if (!isAccEnable) {
+            elements.forEach(function (e) {
+                var dataId = DataPointUtils.getDataPointId(e);
+                var dataPoint = dataModel.getDataPoint(dataId);
+                if (dataPoint) {
+                    var shape = getShape(plot, dataPoint);
 
-                var visible;
-                var width = 1;
-                var extraData;
-                if (d3.select(e).classed(CSS_CLASS.DATAPOINTSELECTED)) {
-                    prop = props.get('interaction.selected');
-                    visible = true;
-                } else {
-                    if (service.shouldUseDeselectedColor()) {
-                        prop = props.get('interaction.deselected');
+                    var visible;
+                    var width = 1;
+                    var extraData;
+                    if (d3.select(e).classed(CSS_CLASS.DATAPOINTSELECTED)) {
+                        prop = props.get('interaction.selected');
+                        visible = true;
                     } else {
-                        prop = props.get('plotArea.dataPoint');
-                        extraData = DataGraphics.getData(e);
-                        if (extraData) {
-                            width = extraData.strokeWidth;
+                        if (service.shouldUseDeselectedColor()) {
+                            prop = props.get('interaction.deselected');
+                        } else {
+                            prop = props.get('plotArea.dataPoint');
+                            extraData = DataGraphics.getData(e);
+                            if (extraData) {
+                                width = extraData.strokeWidth;
+                            }
+                        }
+                        visible = false;
+                    }
+
+                    if (shape === "line") {
+                        HighlightHelper.drawStroke(service, e, 'path, rect', prop.stroke, width);
+                        HighlightHelper.drawFill(service, e, 'path, rect', prop, isMarkerRendererExist, true);
+                        if (!visible) {
+                            setMakerOpacity(service, e);
                         }
+                    } else {
+                        extraData = DataGraphics.getData(e);
+                        HighlightHelper.drawStroke(service, e, 'rect', prop.stroke, width, undefined, extraData);
+                        HighlightHelper.drawFill(service, e, 'rect, path', prop, isMarkerRendererExist);
                     }
-                    visible = false;
                 }
+            });
+        } else {
+            elements = elements.filter(function (e) {
+                var dataId = DataPointUtils.getDataPointId(e);
+                return dataModel.getDataPoint(dataId) !== undefined;
+            });
+            elements.forEach(function (e) {
+                var dataId = DataPointUtils.getDataPointId(e);
+                var dataPoint = dataModel.getDataPoint(dataId);
+                if (dataPoint) {
+                    var shape = getShape(plot, dataPoint);
 
-                if(shape === "line"){
-                    HighlightHelper.drawStroke(service, e, 'path, rect', prop.stroke, width);
-                    HighlightHelper.drawFill(service, e, 'path, rect', prop, isMarkerRendererExist, true);
-                    if (!visible) {
-                        setMakerOpacity(service, e);
+                    var visible;
+                    var width = 1;
+                    var extraData;
+
+                    if (d3.select(e).classed(CSS_CLASS.DATAPOINTSELECTED)) {
+                        prop = props.get('interaction.selected');
+                        visible = true;
+                        var strokeProp = {};
+                        for (var key in prop.stroke) {
+                            if (prop.stroke.hasOwnProperty(key)) {
+                                strokeProp[key] = prop.stroke[key];
+                            }
+                        }
+                        strokeProp.isHover = false;
+                        HighlightHelper.drawInnerStroke(
+                            service,
+                            e,
+                            'rect',
+                            "select",
+                            strokeProp,
+                            extraData ? extraData.strokeWidth : 1,
+                            true,
+                            extraData
+                        );
+                    } else {
+                        if (service.shouldUseDeselectedColor()) {
+                            prop = props.get('interaction.deselected');
+                        } else {
+                            prop = props.get('plotArea.dataPoint');
+                            extraData = DataGraphics.getData(e);
+                            if (extraData) {
+                                width = extraData.strokeWidth;
+                            }
+                        }
+                        visible = false;
                     }
-                }else{
-                    extraData = DataGraphics.getData(e);
-                    if (isAccEnable) {
-                        var BGCOLORPROPS = [ "plotArea.grid.background.color",
-                         "plotArea.background.color",
-                         "general.background.color"];
-                        var propMgr = service.getProperties();
-                        var textVisible = propMgr.get('plotArea.dataLabel.visible');
-                        var template = service.getEffectManager()._getTemplate().name;
-                        var theme =  ACCStyleUtils.getTheme(template);
-                        var chartType = service._getChartType();
-                        var threshold = ACCStyleUtils.getThreshold(theme, chartType, textVisible);
-                        var strokeColor = "plotArea.dataPoint.stroke.color";
-                        var strokeVisible = "plotArea.dataPoint.stroke.visible";
-                        var bgcolor =  ColorUtil.getBgColor(propMgr,
-                        propMgr.get(strokeVisible) ? BGCOLORPROPS.concat(strokeColor) : BGCOLORPROPS);
-                        var fill = extraData.color;
-                        if (fill && bgcolor) {
-                            var ratioObj = ColorUtil.checkColorContrast(bgcolor, fill, threshold);
-                            if (!ratioObj.meetsThreshold) {
-                                var stroke = ACCStyleUtils.getBorderColor(extraData.color);
-                                prop.stroke.color = stroke ? stroke : prop.stroke.color;
+
+                    if (shape === "line") {
+                        HighlightHelper.drawStroke(service, e, 'path, rect', prop.stroke, width);
+                        HighlightHelper.drawFill(service, e, 'path, rect', prop, isMarkerRendererExist, true);
+                        if (!visible) {
+                            setMakerOpacity(service, e);
+                        }
+                    } else {
+                        extraData = DataGraphics.getData(e);
+                        if (!d3.select(e).classed(CSS_CLASS.DATAPOINTSELECTED)) {
+                            var strokeProperty = {};
+                            for (var k in prop.stroke) {
+                                if (prop.stroke.hasOwnProperty(k)) {
+                                    strokeProperty[k] = prop.stroke[k];
+                                }
                             }
+                            strokeProperty.visible = false;
+                            strokeProperty.isHover = true;
+
+                            HighlightHelper.drawInnerStroke(
+                                service,
+                                e,
+                                'rect',
+                                "hover",
+                                strokeProperty,
+                                extraData.strokeWidth,
+                                true,
+                                extraData
+                            );
+                            if (d3.select(e).classed(CSS_CLASS.DATAPOINTDESELECTED)) {
+                                var deselectProp = service.getProperties().get('interaction.deselected');
+                                HighlightHelper.drawInnerStroke(
+                                    service,
+                                    e,
+                                    'rect',
+                                    'deselect',
+                                    deselectProp.stroke,
+                                    (extraData && extraData.strokeWidth) || 1,
+                                    true,
+                                    extraData || {}
+                                );
+                            }
+                            var isExcludedChartType = ACCStyleUtils.isExcludedChartType(service._getChartType());
+                            prop.stroke.color = isExcludedChartType ?
+                                prop.stroke.color : getStrokeColor(service, extraData);
+                        }
+                        if (
+                            !d3.select(e).classed(CSS_CLASS.DATAPOINTSELECTED) &&
+                            !d3.select(e).classed(CSS_CLASS.DATAPOINTDESELECTED)
+                        ) {
+                            HighlightHelper.drawStroke(service, e, 'rect', prop.stroke, width, undefined, extraData);
+                        }
+                        HighlightHelper.drawFill(service, e, 'rect, path', prop, isMarkerRendererExist);
+                        var hasInnerStroke = ACCStyleUtils.isTreeMapOrHeatMap(service._getChartType());
+                        if (hasInnerStroke) {
+                            HighlightHelper.mergeRectContent(e, rectCache);
                         }
                     }
-                    HighlightHelper.drawStroke(service, e, 'rect', prop.stroke, width, undefined, extraData);
-                    HighlightHelper.drawFill(service, e, 'rect, path', prop, isMarkerRendererExist);
                 }
-            }
-        });
+            });
+            HighlightHelper.resetRectCache(rectCache);
+        }
     };
 
     Handler.hoverOnBarDuringBigData = function(event, service, point) {
@@ -28073,7 +28446,9 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
     "sap/viz/framework/common/util/ObjectUtils",
     "sap/viz/chart/behavior/config/ScreenReaderUtil",
     "sap/viz/chart/components/util/BoundingBoxUtils",
-    "sap/viz/chart/components/util/ChartTypeUtils"
+    "sap/viz/chart/components/util/ChartTypeUtils",
+    "sap/viz/chart/behavior/config/HighlightHelper",
+    "sap/viz/framework/common/util/NumberUtils",
 ], function(
     SVG,
     UADetector,
@@ -28093,7 +28468,9 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
     ObjectUtils,
     ScreenReaderUtil,
     BoundingBox,
-    ChartTypeUtils
+    ChartTypeUtils,
+    HighlightHelper,
+    NumberUtils
 ) {
 
     var THRESHOLD = 0.05;
@@ -28646,55 +29023,259 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
         var svgRect = currentNode.getBoundingClientRect(),
             digitalWidth = parseFloat(properties.width) || 1,
             dasharray = digitalWidth + ', ' + digitalWidth;
-            
-            if(properties.style && properties.style.toLowerCase() === 'solid'){
-                dasharray = 'none';
-            }
 
+        if(properties.style && properties.style.toLowerCase() === 'solid'){
+        //if properties.style (referenced from focus style class) is solid, no dash array needed
+            dasharray = 'none';
+        }
+            
         var boundNode = hoverNode.append("g").attr("class", "v-m-highlight");
         var bound = {
             rect: null,
             line: null,
-            polygon: null
-        };
-        var isStackedChart;
+            polygon: null,
+            path: null
+        };
+        var accSupportedChartType = ["info/bar", "info/dual_bar", "info/column",
+            "info/dual_column", "info/timeseries_column", "info/timeseries_combination",
+            "info/dual_timeseries_combination", "info/timeseries_stacked_column",
+            "info/timeseries_100_stacked_column", "info/timeseries_waterfall",
+            "info/timeseries_stacked_combination", "info/stacked_bar", "info/stacked_column",
+            "info/dual_stacked_bar", "info/dual_stacked_column",
+            "info/100_stacked_bar", "info/100_stacked_column",
+            "info/100_dual_stacked_bar", "info/100_dual_stacked_column",
+            "info/mekko", "info/horizontal_mekko",
+            "info/100_mekko", "info/100_horizontal_mekko",
+            "info/waterfall", "info/horizontal_waterfall",
+            "info/stacked_waterfall", "info/horizontal_stacked_waterfall",
+            "info/heatmap", "info/combination", "info/horizontal_combination",
+            "info/dual_combination", "info/dual_horizontal_combination",
+            "info/stacked_combination", "info/horizontal_stacked_combination",
+            "info/dual_stacked_combination", "info/dual_horizontal_stacked_combination"];
+        var isStackedChart, isAccSupported;
         if (properties.renderType) {
             isStackedChart = properties.renderType.indexOf('stacked') > -1;
+            isAccSupported = accSupportedChartType.indexOf(service._getChartType()) > -1;
         }
+        var strokeStyle = service.getProperties().get("interaction.keyboard.style");
         var angle = properties.angle;
         var isAccEnable = service && service.getProperties().get("interaction.enableAccUpdates");
-        properties.width = properties.width ? parseFloat(properties.width.split('px')[0]) : 1;
         if (isStackedChart && properties.isZeroValueInStack && properties.isZeroOnFirstTab) {
             bound.line = boundNode.append('line').attr('class', 'v-highlight-bound')
                 .attr("stroke", properties.color)
-                .attr("stroke-width", properties.width).attr("stroke-dasharray", dasharray)
-                .style("pointer-events", "none" );
+                .attr("stroke-width", properties.width)
+                .attr("stroke-dasharray", dasharray)
+                .style("pointer-events", "none");
         } else {
-            if(isAccEnable && selectBound === AXIS_ITEM_NODE_BOUND_ACC){
-                var id = "clip-path=" + Math.random().toString(36).slice(2);
-                boundNode.append('clipPath')
-                    .attr("class", CLIPPATH)
-                    .attr("id", id)
-                    .append("polygon")
-                    .attr("points", d3Node.attr("points"));
-                bound.polygon = boundNode.append("polygon").attr("class", "v-highlight-bound")
-                    .attr("points", d3Node.attr("points"))
+            if (isAccEnable) {
+                var cls = d3Node.attr("class") || "";
+                var parentNode = currentNode.parentNode;
+                var parentCls = d3.select(parentNode).attr("class") || "";
+                var isLabel = /^viz-axis-label/.test(cls) ||
+                    (currentNode && currentNode.tagName && currentNode.tagName.toLowerCase() === "text");
+                var isDonutDatapoint = /scatter|bubble|pie|donut/.test(properties.renderType) && 
+                selectBound === 'path';
+                var isLegend = parentCls.includes("v-legend-element") ||
+                    parentCls.includes("v-legend-item");
+
+                bound.rect = boundNode.append("rect")
+                    .attr("class", "v-highlight-bound")
+                    .attr("transform", d3Node.attr("transform"))
                     .attr("fill", "transparent")
                     .attr("fill-opacity", 0)
-                    .attr("stroke", properties.color)
-                    .attr("stroke-width", properties.width * 2)
-                    .attr("stroke-dasharray", dasharray)
                     .attr("shape-rendering", "crispEdges")
                     .style("pointer-events", "none")
-                    .attr("clip-path", "url(#" + id + ")");
-            }else{
-                bound.rect =  boundNode.append("rect").attr("class", "v-highlight-bound")
+                    .style("outline", "none");
+
+
+                var keyboardStrokeProp = {};
+                var keyProp = service.getProperties().get('interaction.keyboard');
+                for (var index in keyProp) {
+                    if (keyProp.hasOwnProperty(index)) {
+                        keyboardStrokeProp[index] = keyProp[index];
+                    }
+                }
+                if (typeof properties.width === "string") {
+                    properties.width = properties.width ? parseFloat(properties.width.split('px')[0]) : 1;
+                } else {
+                    properties.width = properties.width ? parseFloat(properties.width) : 1;
+                }
+
+                if (isAccSupported && !isLabel) {
+                    bound.rect
+                        .attr("x", d3Node.attr("x"))
+                        .attr("y", d3Node.attr("y"))
+                        .attr("width", d3Node.attr("width"))
+                        .attr("height", d3Node.attr("height"))
+                        .attr("stroke", "none")
+                        .attr("stroke-width", null)
+                        .attr("stroke-dasharray", null);
+                    if (isLegend) {
+                        bound.rect = boundNode.append("rect").attr("class", "v-highlight-bound")
+                            .attr("transform", d3Node.attr("transform"))
+                            .attr("width", d3Node.attr("width")).attr("height", d3Node.attr("height"))
+                            .attr("x", d3Node.attr("x")).attr("y", d3Node.attr("y"))
+                            .attr("fill", "transparent").attr("fill-opacity", 0)
+                            .attr("stroke", properties.color)
+                            .attr("stroke-width", properties.width)
+                            .attr(
+                                "stroke-dasharray",
+                                (strokeStyle && strokeStyle.toLowerCase() === "solid") ?
+                                    null :
+                                    (strokeStyle && strokeStyle.toLowerCase() === "dotted") ?
+                                        (properties.width + "," + properties.width) :
+                                        dasharray
+                            )
+                            .attr("shape-rendering", "crispEdges").style("pointer-events", "none");
+                    } else {
+                        var nodes = document.querySelector('.v-stack');
+                        if (!nodes) {
+                            return;
+                        }
+
+                        var gElements = nodes.getElementsByTagName('g');
+                        var gArray = Array.prototype.slice.call(gElements);
+
+                        var targetG = null;
+                        for (var i = 0; i < gArray.length; i++) {
+                            var currentG = gArray[i];
+                            var tabindex = currentG.getAttribute('tabindex');
+                            if (tabindex === '0') {
+                                targetG = currentG;
+                                break;
+                            }
+                        }
+                        var isStillFocused = targetG &&
+                            targetG.getAttribute('tabindex') === '0' &&
+                            targetG === document.activeElement;
+                        if (!isStillFocused) {
+                            return;
+                        }
+                        keyboardStrokeProp.visible = true;
+                        d3.select(targetG).select('.v-m-highlight').remove();
+                        HighlightHelper.drawInnerStroke(
+                            service, targetG, 'rect', "keyboard", keyboardStrokeProp,
+                            undefined,
+                            false,
+                            undefined
+                        );
+
+                    }
+                } else if (isDonutDatapoint) {
+                    var pieDatapointClippathId = "clip-path=" + Math.random().toString(36).slice(2);
+                    boundNode.append('clipPath')
+                        .attr("class", CLIPPATH)
+                        .attr("id", pieDatapointClippathId)
+                        .append("path")
+                        .attr("d", d3Node.attr("d"));
+                    bound.path = boundNode.append('path')
+                        .attr("d", d3Node.attr("d"))
+                        .attr("fill", "transparent")
+                        .attr("fill-opacity", 0)
+                        .attr("stroke", properties.color)
+                        .attr("stroke-width", properties.width * 2)
+                        .attr("stroke-dasharray", dasharray)
+                        .attr("shape-rendering", "crispEdges")
+                        .style("pointer-events", "none")
+                        .attr("clip-path", "url(#" + pieDatapointClippathId + ")");
+                } else if (!isAccSupported) {
+                    bound.rect = boundNode.append("rect").attr("class", "v-highlight-bound")
+                        .attr("transform", d3Node.attr("transform"))
+                        .attr("width", d3Node.attr("width")).attr("height", d3Node.attr("height"))
+                        .attr("x", d3Node.attr("x")).attr("y", d3Node.attr("y"))
+                        .attr("fill", "transparent").attr("fill-opacity", 0)
+                        .attr("stroke", properties.color)
+                        .attr("stroke-width", properties.width)
+                        .attr(
+                            "stroke-dasharray",
+                            (strokeStyle && strokeStyle.toLowerCase() === "solid") ?
+                                null :
+                                (strokeStyle && strokeStyle.toLowerCase() === "dotted") ?
+                                    (properties.width + "," + properties.width) :
+                                    dasharray
+                        )
+                        .attr("shape-rendering", "crispEdges").style("pointer-events", "none");
+                }
+
+                if (isLabel) {
+                    if (selectBound === AXIS_ITEM_NODE_BOUND_ACC) {
+                        var id = "clip-path=" + Math.random().toString(36).slice(2);
+                        boundNode.append('clipPath')
+                            .attr("class", CLIPPATH)
+                            .attr("id", id)
+                            .append("polygon")
+                            .attr("points", d3Node.attr("points"));
+                        bound.polygon = boundNode.append("polygon").attr("class", "v-highlight-bound")
+                            .attr("points", d3Node.attr("points"))
+                            .attr("fill", "transparent")
+                            .attr("fill-opacity", 0)
+                            .attr("stroke", properties.color)
+                            .attr("stroke-width", properties.width * 2)
+                            .attr("stroke-dasharray", dasharray)
+                            .attr("shape-rendering", "crispEdges")
+                            .style("pointer-events", "none")
+                            .attr("clip-path", "url(#" + id + ")");
+                    } else {
+                        var bbox = currentNode.getBBox();
+                        var roundedX = Math.round(bbox.x);
+                        var roundedY = Math.round(bbox.y);
+                        var roundedWidth = Math.round(bbox.width);
+                        var roundedHeight = Math.round(bbox.height);
+                        var scale = 1;
+                        var parentTransform = d3.select(currentNode.parentNode).attr("transform");
+                        if (parentTransform && /scale\(([^)]+)\)/.test(parentTransform)) {
+                            scale = parseFloat(parentTransform.match(/scale\(([^)]+)\)/)[1]) || 1;
+                        }
+
+                        var baseDash = 4;
+                        var baseGap = 2;
+                        var scaledDash = NumberUtils.preciseSimple(baseDash / scale, 1);
+                        var scaledGap = NumberUtils.preciseSimple(baseGap / scale, 1);
+
+                        bound.rect
+                            .attr("x", roundedX)
+                            .attr("y", roundedY)
+                            .attr("width", roundedWidth)
+                            .attr("height", roundedHeight)
+                            .attr("stroke", keyboardStrokeProp.color)
+                            .attr("stroke-width", keyboardStrokeProp.width || 1)
+                            .attr(
+                                "stroke-dasharray",
+                                (strokeStyle && strokeStyle.toLowerCase() === "solid") ?
+                                    null :
+                                    (strokeStyle && strokeStyle.toLowerCase() === "dotted") ?
+                                        ((keyboardStrokeProp.width || 1) + "," + (keyboardStrokeProp.width || 1)) :
+                                        (keyboardStrokeProp.dasharray ?
+                                            keyboardStrokeProp.dasharray :
+                                            (scaledDash + "," + scaledGap)
+                                        )
+                            )
+                            .attr("shape-rendering", "crispsEdges")
+                            .attr("class", "v-highlight-bound")
+                            .attr("transform", d3Node.attr("transform"))
+                            .attr("fill", "transparent")
+                            .attr("fill-opacity", 0)
+                            .attr("shape-rendering", "crispEdges")
+                            .style("pointer-events", "none")
+                            .style("outline", "none");
+                    }
+                }
+            } else {
+                bound.rect = boundNode.append("rect").attr("class", "v-highlight-bound")
                     .attr("transform", d3Node.attr("transform"))
                     .attr("width", d3Node.attr("width")).attr("height", d3Node.attr("height"))
                     .attr("x", d3Node.attr("x")).attr("y", d3Node.attr("y"))
                     .attr("fill", "transparent").attr("fill-opacity", 0)
                     .attr("stroke", properties.color)
-                    .attr("stroke-width", properties.width).attr("stroke-dasharray", dasharray)
+                    .attr("stroke-width", properties.width)
+                    .attr(
+                        "stroke-dasharray",
+                        (strokeStyle && strokeStyle.toLowerCase() === "solid") ?
+                            null :
+                            (strokeStyle && strokeStyle.toLowerCase() === "dotted") ?
+                                properties.width + "," + properties.width :
+                                dasharray
+                    )
                     .attr("shape-rendering", "crispEdges").style("pointer-events", "none");
             }
         }
@@ -28775,7 +29356,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                 x -= strokeWidth;
                 y -= strokeWidth;
                 width = width ? width + 2 * strokeWidth : 0;
-                height = height? height + 2 * strokeWidth : 0;
+                height = height ? height + 2 * strokeWidth : 0;
             }
             if (TypeUtils.isExist(bound.line) || TypeUtils.isExist(bound.rect)) {
                 var pos = {
@@ -28818,7 +29399,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                         .attr("y2", y);
                 } else {
                     bound.line.attr("x1", x).attr("y1", y).attr("x2", x)
-                        .attr("y2",y + sizeInfo.height);
+                        .attr("y2", y + sizeInfo.height);
                 }
                 bound.line.attr("transform", "translate(" + transform.a + "," + transform.b + ")");
                 if (properties.bCloseCategory || isOverLapInStack(hoverPos, stackPos, properties, ZERO_FOCUS.LINE)) {
@@ -28849,10 +29430,16 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                 }
             }
         } else if (!angle || angle % 90 === 0) {
+            if(selectBound === LEGEND_ITEM_BOUND){
+                return;
+            }
+            //feier - DINC0114948: legend focus border too close to chart UI, need more spacing
+            //in case of legend, no need to shift the x position, otherwise focus will touch marker
+            //so exiting out of function
             var parentRect = mainBoundNode.getBoundingClientRect();
             var intersectionBoundRect = BoundingBox.intersection(parentRect, svgRect);
             if (intersectionBoundRect) {
-                if(!isAccEnable || (selectBound !== AXIS_ITEM_NODE_BOUND_ACC)){
+                if (!isAccEnable || (selectBound !== AXIS_ITEM_NODE_BOUND_ACC)) {
                     bound.rect.attr("width", intersectionBoundRect.width)
                         .attr("height", intersectionBoundRect.height);
                     /*
@@ -28923,9 +29510,9 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
     var clearTabIndexForTabbingOut = function(service){
         var tabindex0 = service._rootNode.selectAll('[tabindex="0"]')[0];
         if(tabindex0.length>1){
-            //need to have exactly one element have tabindex 0,
-            //otherwise can'tab out of the DOM
-            //the element can be axis or legend item, preferably not datapoint
+        //need to have exactly one element have tabindex 0,
+        //otherwise can'tab out of the DOM
+        //the element can be axis or legend item, preferably not datapoint
 
             service._rootNode.selectAll('.v-datapoint[tabindex="0"]').attr("tabindex",null);
             tabindex0 = service._rootNode.selectAll('[tabindex="0"]')[0];
@@ -28940,16 +29527,19 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                 return (chartType.indexOf("heatmap") > -1);
             };
 
+            if(isHeatMap(service)){
+                //heat map behaving differently for some reason, needs special handling
+                service._rootNode
+                .selectAll('rect[tabindex="0"]')
+                .attr("tabindex", null);
+                tabindex0 = service._rootNode.selectAll('[tabindex="0"]')[0];
+            }
+
             var legend_indicator = isTreeMap(service) || isHeatMap(service) ? '.v-mbc-legend-item' : '.v-legend-item';
             var legend_node = service._rootNode.select(legend_indicator.concat('[tabindex="0"]')).node();
 
             var not_legend_selector = ":not(" + legend_indicator + ")";
 
-            if(isHeatMap(service)){
-                //heat map behaving differently for some reason
-                return;
-            } 
-
             if(legend_node){
                 service._rootNode
                 .selectAll('[tabindex="0"]')
@@ -28960,9 +29550,10 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                 .selectAll('[tabindex="0"]')
                 .filter(function(d,i){return i<tabindex0.length-1;})
                 .attr("tabindex", null);
-            }   
+            }
 
         }
+    
     };
 
 
@@ -29063,6 +29654,11 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                 else {
                     boundNode = "rect";
                 }
+                if(isAccEnable){
+                    if (/pie|donut/.test(renderType)) {
+                        boundNode = "path";
+                    }
+                }
                 hoveredTargetNode = service.getStatus("keyArrowHoveredDataPoint");
                 oldHovredTargetId = service.getStatus("hoveredDataPointId");
                 if (!hoveredTargetNode) {
@@ -29556,6 +30152,11 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                 } else {
                     boundNode = "rect";
                 }
+                if(isAccEnable){
+                    if (/pie|donut/.test(renderType)) {
+                        boundNode = "path";
+                    }
+                }
                 hoveredDataPointId = service.getStatus("hoveredDataPointId");
                 dpGroupNode = service.getNodes(service.NodeType.DATA_POINT_GROUP);
                 hoveredTarget = dpGroupNode.node()
@@ -42916,9 +43517,9 @@ define('sap/viz/chart/components/datalabels/DataLabels',[
         if(!color || range === 'outside'){
             //dataLabelColor may need to be calculated.
             //check if dataLabel "covers" dataPoint.
-            var outOfDataPoint = this.isDataLabelOutOfDataPoint(item.node, item);
+            outOfDataPoint = this.isDataLabelOutOfDataPoint(item.node, item);
             //backcolor is refercolor or backgroundColor
-            var backColor = null;
+            backColor = null;
             if(color && range === 'outside' && !outOfDataPoint){
             // process case then customer set a data label color and set "colorRange" to "outside"
                 backColor = referColor|| "#000000";
@@ -47958,12 +48559,14 @@ define('sap/viz/chart/components/renderers/ReferenceLineRenderer',['sap/viz/fram
     'sap/viz/framework/common/util/FiscalUtil',
     'sap/viz/framework/common/util/NameColorUtils',
     "sap/viz/framework/common/util/DataGraphics",
-    'sap/viz/framework/common/util/TimeUtil'
+    'sap/viz/framework/common/util/TimeUtil',
+    'sap/viz/framework/common/util/ACCStyleUtils'
 ], function (SVG, TextUtils, Constants, StyleUtils, TypeUtils,
     FiscalUtil,
     NameColorUtils,
     DataGraphics,
-    TimeUtil) {
+    TimeUtil,
+    ACCStyleUtils) {
 
     var ReferenceLineRenderer = {};
 
@@ -48114,8 +48717,15 @@ define('sap/viz/chart/components/renderers/ReferenceLineRenderer',['sap/viz/fram
         var config = options.combinedConfig;
         var labelTextGroup = SVG.create("g", options.labelsGroupDOM);
         labelTextGroup.setAttribute("class", "v-referenceline-label v-referenceline-label-" + options.key);
-        labelTextGroup.setAttribute("fill",
-            config.label.color ? config.label.color : config.axisColor);
+        var fill = config.label.color ? config.label.color : config.axisColor;
+        var textShadow = 'none';
+        if (options.enableAcc) {
+            if (options.color) {
+                fill = ACCStyleUtils.getTextColor(options.color);
+                textShadow = ACCStyleUtils.getTextShadowStyle(options.color);
+            }
+        }
+        labelTextGroup.setAttribute("fill", fill);
         labelTextGroup.setAttribute("font-size", config.label.fontSize);
         labelTextGroup.setAttribute("font-weight", config.label.fontWeight);
         labelTextGroup.setAttribute("font-family", config.label.fontFamily);
@@ -48148,6 +48758,7 @@ define('sap/viz/chart/components/renderers/ReferenceLineRenderer',['sap/viz/fram
         var text = SVG.create("text", labelTextGroup);
         text.textContent = config.label.text;
         text.setAttribute("text-anchor", config.textAnchor);
+        text.setAttribute("style", 'text-shadow: ' + textShadow + ';');
 
         if (!options.isHorizontal) {
             var widthPos = options.pos * options.width;
@@ -48461,6 +49072,8 @@ define('sap/viz/chart/components/renderers/ReferenceLineRenderer',['sap/viz/fram
                 labelOptions.height = options.height;
                 labelOptions.axisLayout = axisLayout;
                 labelOptions.plotInstance = options.plotInstance;
+                labelOptions.color = config.color;
+                labelOptions.enableAcc = options.enableAcc;
 
                 var labelObj = this._drawLabel(labelOptions);
                 if (labelObj) {
@@ -49273,6 +49886,7 @@ define('sap/viz/chart/components/plots/BasePlot',[
         //reference labels.
         options.plotInstance = this;
         options.clipPath = this.clipPath;
+        options.enableAcc = this._properties.origin.get('interaction.enableAccUpdates') || false;
         referenceLineRenderer.render(options);
     };
 
@@ -49801,33 +50415,32 @@ define('sap/viz/chart/components/plots/BasePlot',[
                 config.matchSemantic = true;
             }
 
-            var excludeChart = ['info/treemap', 'info/pie', 'info/heatmap', 'info/donut'];
-            var isExcludedChartType = false;
-            if(excludeChart.indexOf(this._semanticMgr._chartType) >= 0){
-                isExcludedChartType = true;
+            if (result.properties.stroke) {
+                config.graphic.stroke = result.properties.stroke;
             }
-            var enableAccUpdates = this._properties.origin.get('interaction.enableAccUpdates') || false;
+            if (result.properties.strokeWidth) {
+                config.graphic.strokeWidth = result.properties.strokeWidth;
+            }
+        }
 
-            if (enableAccUpdates && !isExcludedChartType) {
-                var theme = ACCStyleUtils.getTheme(config.effectManager._template.name);
-                if (this._checkColorContrast(config, theme)) {
-                    if (result.properties.stroke) {
-                        config.graphic.stroke = result.properties.stroke;
-                    }
-                    if (result.properties.strokeWidth) {
-                        config.graphic.strokeWidth = result.properties.strokeWidth;
-                    }
-                } else {
-                    config.graphic.stroke = ACCStyleUtils.getBorderColor(result.properties.color);
-                    config.graphic.strokeWidth = ACCStyleUtils.getBorderWidth();
-                }
-            } else {
-                if (result.properties.stroke) {
-                    config.graphic.stroke = result.properties.stroke;
-                }
-                if (result.properties.strokeWidth) {
-                    config.graphic.strokeWidth = result.properties.strokeWidth;
-                }
+        var enableAccUpdates = this._properties.origin.get('interaction.enableAccUpdates') || false;
+        var isExcludedChartType = ACCStyleUtils.isExcludedChartType(this._semanticMgr._chartType);
+        if (enableAccUpdates && !isExcludedChartType) {
+            var vizTheme = config.effectManager._getTemplate() ?
+                config.effectManager._getTemplate().name : null;
+            var theme = ACCStyleUtils.getTheme(vizTheme);
+            if (!this._checkColorContrast(config, theme)) {
+                var resultColor = null;
+                if (result &&
+                    result.properties &&
+                    result.properties.hasOwnProperty("color")) {
+                    resultColor = result.properties.color;
+                }
+                resultColor = resultColor || config.data.color;
+                var accBorder = ACCStyleUtils.getBorderColor(resultColor);
+                var accBorderWidth = ACCStyleUtils.getBorderWidth();
+                config.graphic.stroke = accBorder ? accBorder : config.graphic.stroke;
+                config.graphic.strokeWidth = accBorderWidth ? accBorderWidth : config.graphic.strokeWidth;
             }
         }
 
@@ -50608,7 +51221,10 @@ define('sap/viz/chart/components/renderers/BarRenderer',[ "sap/viz/framework/com
                     node.setAttribute('stroke', graphic.stroke);
                     node.setAttribute('stroke-width', graphic.strokeWidth);
                 }
-            }           
+            }
+            if (graphic.innerStroke && graphic.innerStroke.visible) {
+                node._innerStrokeConfig = config;
+            }
         }
 
         DataGraphics.setCustomizationInfo(node, {'defaultRenderer' : true});
@@ -53439,23 +54055,78 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForBar',[
             }
             var prop;
             var isMarkerRendererExist = TypeUtils.isExist(props.get('plotArea.markerRenderer'));
-            mainNode.forEach(function(e) {
-                var width = 1;
-                if(gray || bUseRange) {
-                    prop = props.get('interaction.deselected');
-                    if (bUseRange) {
-                        prop = ObjectUtils.extend(true, {}, prop);
-                        prop.opacity = 1;
+            if (!isAccEnable) {
+                mainNode.forEach(function (e) {
+                    var width = 1;
+                    if (gray || bUseRange) {
+                        prop = props.get('interaction.deselected');
+                        if (bUseRange) {
+                            prop = ObjectUtils.extend(true, {}, prop);
+                            prop.opacity = 1;
+                        }
+                    } else {
+                        prop = props.get('plotArea.dataPoint');
+                        width = DataGraphics.getData(e).strokeWidth;
                     }
-                }else{
-                    prop = props.get('plotArea.dataPoint');
-                    width = DataGraphics.getData(e).strokeWidth;
-                }
-                var extraData = DataGraphics.getData(e);
-                HighlightHelper.drawStroke(service, e, 'rect', prop.stroke, 
-                    TypeUtils.isExist(width) ? width : 1, undefined, extraData);
-                HighlightHelper.drawFill(service, e, 'rect, path', prop, isMarkerRendererExist);
-            });
+                    var extraData = DataGraphics.getData(e);
+                    HighlightHelper.drawStroke(service, e, 'rect', prop.stroke,
+                        TypeUtils.isExist(width) ? width : 1, undefined, extraData);
+                    HighlightHelper.drawFill(service, e, 'rect, path', prop, isMarkerRendererExist);
+                });
+            } else {
+                var isClickBlank = Object.keys(event.data).length <= 1;
+                mainNode.forEach(function (e) {
+                    var width = 1;
+                    if (gray || bUseRange) {
+                        prop = props.get('interaction.deselected');
+                        if (bUseRange) {
+                            var tempProp = {};
+                            for (var key in prop) {
+                                if (prop.hasOwnProperty(key)) {
+                                    tempProp[key] = prop[key];
+                                }
+                            }
+                            tempProp.opacity = 1;
+                            prop = tempProp;
+                        }
+                    } else {
+                        prop = props.get('plotArea.dataPoint');
+                        var data = DataGraphics.getData(e);
+                        if (data && data.strokeWidth != null) {
+                            width = data.strokeWidth;
+                        }
+                    }
+                    
+                    var strokeProp = {};
+                    for (var i in prop.stroke) {
+                        if (prop.stroke.hasOwnProperty(i)) {
+                            strokeProp[i] = prop.stroke[i];
+                        }
+                    }
+                    if (isClickBlank) {
+                        d3.select(e).classed(CSS_CLASS.DATAPOINTDESELECTED, false);
+
+                        HighlightHelper.drawStroke(
+                            service, e, 'rect', prop.stroke,
+                            DataGraphics.getData(e).strokeWidth || 1, undefined, DataGraphics.getData(e)
+                        );
+                        HighlightHelper.drawFill(service, e, 'rect, path', prop, isMarkerRendererExist);
+
+                        d3.select(e).selectAll('rect')
+                            .attr("clip-path", null)
+                            .attr("data-inner-stroke-width", null)
+                            .attr("stroke-dasharray", null);
+                    } else {
+                        d3.select(e).classed(CSS_CLASS.DATAPOINTDESELECTED, true);
+                        HighlightHelper.drawInnerStroke(
+                            service, e, 'rect', "select", strokeProp,
+                            DataGraphics.getData(e).strokeWidth, false, DataGraphics.getData(e)
+                        );
+                        HighlightHelper.drawFill(service, e, 'rect, path', prop, isMarkerRendererExist);
+                    }
+                });
+            }
+
         }
     }, {
         "id": "clearPlot_timeseries_column",
@@ -55921,6 +56592,22 @@ define('sap/viz/chart/components/plots/StackedColumnPlot',[
         var isCustom = (cpRenderer !== this._dataPointRenderer && cpRenderer );
         var stackCtx = [], origGraphic, dataPointG;
         var extraData, value;
+        var isAccEnable = this._properties.origin.get("interaction.enableAccUpdates");
+        var segmentGap = 0;
+        if (isAccEnable) {
+            var renderType = (this._options && this._options.renderType) ||
+                (this._properties && this._properties._props &&
+                    this._properties._props.renderType &&
+                    this._properties._props.renderType.value) || "";
+
+            var isMekkoType = /(^|_)mekko/i.test(renderType);
+
+            if (!isMekkoType && this._properties && this._properties._props &&
+                this._properties._props["plotArea.segmentGap"] &&
+                typeof this._properties._props["plotArea.segmentGap"].value !== "undefined") {
+                segmentGap = +this._properties._props["plotArea.segmentGap"].value || 0;
+            }
+        }
         stackCtx.range = [0, 0];
         if (!updateOnly) {
             categoryG = SVG.create("g");
@@ -55954,8 +56641,20 @@ define('sap/viz/chart/components/plots/StackedColumnPlot',[
                 origGraphic = ObjectUtils.extend({}, config.graphic);
                 config.graphic.stackWidth = stackWidth;
                 config.graphic.stackHeight = stackHeight;
-                config.graphic.x = config.horizontal ? position.x - x0 : 0;
-                config.graphic.y = config.horizontal ? 0 : position.y - y0;
+                if (segmentGap > 0) {
+                    if (config.horizontal) {
+                        config.graphic.x = position.x - x0 + segmentGap / 2;
+                        config.graphic.width = Math.max(0, config.graphic.width - segmentGap);
+                        config.graphic.y = 0;
+                    } else {
+                        config.graphic.y = position.y - y0 + segmentGap / 2;
+                        config.graphic.height = Math.max(0, config.graphic.height - segmentGap);
+                        config.graphic.x = 0;
+                    }
+                } else {
+                    config.graphic.x = config.horizontal ?  (position.x - x0) : 0;
+                    config.graphic.y = config.horizontal ? 0 : (position.y - y0);
+                }
                 var defaultRendered = false;
 
                 if (updateOnly) {
@@ -56001,7 +56700,13 @@ define('sap/viz/chart/components/plots/StackedColumnPlot',[
                     newDataPoints.push(dataPointG);
                 }
 
-                dataPointG.setAttribute("transform", 'translate(' + position.x + ', ' + position.y + ')');
+                if (segmentGap > 0) {
+                    var tx = position.x + (config.horizontal ? segmentGap / 2 : 0);
+                    var ty = position.y + (config.horizontal ? 0 : segmentGap / 2);
+                    dataPointG.setAttribute("transform", 'translate(' + tx + ', ' + ty + ')');
+                } else {
+                    dataPointG.setAttribute("transform", 'translate(' + position.x + ', ' + position.y + ')');
+                }
                 config.graphic = origGraphic;
                 if( dataModels && dataModels[i] && !dataModels[i].getData()){
                     dataModels[i].init(config, currentIds[i], data[i],
@@ -56046,6 +56751,17 @@ define('sap/viz/chart/components/plots/StackedColumnPlot',[
                         delete clonedGraphic.pattern;
                         clonedGraphic.fill = "transparent";
                     }
+
+                    if (segmentGap > 0) {
+                        if (config.horizontal) {
+                            config.graphic.x += segmentGap / 2;
+                            config.graphic.width = Math.max(0, config.graphic.width - segmentGap);
+                        } else {
+                            config.graphic.y += segmentGap / 2;
+                            config.graphic.height = Math.max(0, config.graphic.height - segmentGap);
+                        }
+                    }
+
                     node = cpRenderer(config);
                     if (clonedGraphic) {
                         shadowNode = cpRenderer({ graphic: clonedGraphic });
@@ -56099,7 +56815,13 @@ define('sap/viz/chart/components/plots/StackedColumnPlot',[
                     newDataPoints.push(dataPointG);
 
                 }
-                dataPointG.setAttribute("transform", 'translate(' + position.x + ', ' + position.y + ')');
+                if (segmentGap > 0) {
+                    var tx2 = position.x + (config.horizontal ? segmentGap / 2 : 0);
+                    var ty2 = position.y + (config.horizontal ? 0 : segmentGap / 2);
+                    dataPointG.setAttribute("transform", 'translate(' + tx2 + ', ' + ty2 + ')');
+                } else {
+                    dataPointG.setAttribute("transform", 'translate(' + position.x + ', ' + position.y + ')');
+                }
                 if(dataModels && dataModels[i] && !dataModels[i].getData()){
                     dataModels[i].init(config, currentIds[i], data[i],
                         dataPoints[i].id  ||  Constants.NULL_VALUE, null);
@@ -56886,7 +57608,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
     'sap/viz/framework/interaction/Constants',
     'sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',
     "sap/viz/framework/interaction/BehaviorManager"
-], function(
+], function (
     Constants,
     TypeUtils,
     HighlightHelper,
@@ -56901,10 +57623,15 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
 
     var timeLineType = ["info/timeseries_line"];
     var timeCombTypes = ["info/timeseries_combination",
-                         "info/dual_timeseries_combination",
-                         "info/timeseries_stacked_combination"];
+        "info/dual_timeseries_combination",
+        "info/timeseries_stacked_combination"];
     var TimeLineAndComb = timeLineType.concat(timeCombTypes);
 
+    var barCombTypes = ["info/combination", "info/horizontal_combination",
+        "info/dual_combination", "info/dual_horizontal_combination",
+        "info/stacked_combination", "info/horizontal_stacked_combination",
+        "info/dual_stacked_combination", "info/dual_horizontal_stacked_combination"];
+
     var lineType2 = [
         "info/line", "info/horizontal_line",
         "info/dual_line", "info/dual_horizontal_line",
@@ -56929,7 +57656,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
             "name": "selectDataPoint",
             "supportedChartTypes": lineType2,
         },
-        "handler": function(event, service) {
+        "handler": function (event, service) {
             if (service.isBigDataMode()) {
                 DPBhvrHdlr.selectOnLineDuringBigData(event, service);
             } else {
@@ -56942,7 +57669,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
             "name": "deselectDataPoint",
             "supportedChartTypes": lineType2
         },
-        "handler": function(event, service) {
+        "handler": function (event, service) {
             if (service.isBigDataMode()) {
                 return;
             }
@@ -56952,7 +57679,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
             var properties = service.getProperties();
             var lineRenderer;
             var isMarkerRendererExist = TypeUtils.isExist(properties.get('plotArea.markerRenderer'));
-            elements.forEach(function(e) {
+            elements.forEach(function (e) {
                 DataPointUtils.unhighlight(e);
                 lineRenderer = DPBhvrHdlr.getLineRenderer(service, e);
                 DPBhvrHdlr.renderLightLine(service, e, false, lineRenderer);
@@ -56979,6 +57706,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
             "supportedChartTypes": lineType2
         },
         "handler": function (event, service) {
+            var isBarComb = barCombTypes.indexOf(service._getChartType()) > -1;
             if (service.isBigDataMode() && !service.isTrellis()) {
                 DPBhvrHdlr.highlightOnLineDuringBigData(event, service);
             }
@@ -56986,13 +57714,38 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
                 service.fireEvent(event, true);
                 var elements = HighlightHelper.turnToArray(event.data.targets);
                 var properties = service.getProperties();
-                var prop = properties.get('interaction.hover');
+                var isAccEnable = properties.get("interaction.enableAccUpdates");
+                var prop;
+                if (isAccEnable) {
+                    prop = event.data.byKeyboard ?
+                        properties.get('interaction.keyboard') || properties.get('interaction.hover') :
+                        properties.get('interaction.hover');
+                    if (prop && !prop.stroke) {
+                        prop = {
+                            stroke: {
+                                color: prop.color,
+                                width: prop.width,
+                                visible: true
+                            }
+                        };
+                    }
+                } else {
+                    prop = properties.get('interaction.hover');
+                }
                 var isMarkerRenderExist = TypeUtils.isExist(properties.get('plotArea.markerRenderer'));
+
                 elements.forEach(function (e) {
                     var extraData = DataGraphics.getData(e) || {};
                     var bSetChildOpacity = !extraData.isZeroValue;
-                    HighlightHelper.drawStroke(service, e, event.data.byKeyboard ? 'path' : 'path, rect',
-                        prop.stroke, 2, undefined, extraData);
+                    if (isAccEnable && isBarComb) {
+                        HighlightHelper.drawInnerStroke(
+                            service, e, 'path, rect', event.data.byKeyboard ? "keyboard" : "hover", prop.stroke,
+                            DataGraphics.getData(e).strokeWidth, false, DataGraphics.getData(e)
+                        );
+                    } else {
+                        HighlightHelper.drawStroke(service, e, event.data.byKeyboard ? 'path' : 'path, rect',
+                            prop.stroke, 2, undefined, extraData);
+                    }
                     HighlightHelper.drawFill(service, e, 'path, rect', prop, isMarkerRenderExist, bSetChildOpacity);
                 });
             }
@@ -57007,11 +57760,13 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
             if (service.isBigDataMode() && !service.isTrellis()) {
                 DPBhvrHdlr.unhighlightOnLineDuringBigData(event, service);
             } else {
+                var isBarComb = barCombTypes.indexOf(service._getChartType()) > -1;
                 service.fireEvent(event, true);
                 var elements = HighlightHelper.turnToArray(event.data.targets);
                 var props = service.getProperties();
                 var prop;
                 var isMarkerRenderExist = TypeUtils.isExist(props.get('plotArea.markerRenderer'));
+                var isAccEnable = props.get("interaction.enableAccUpdates");
                 elements.forEach(function (e) {
                     var visible;
                     var width = 1;
@@ -57031,7 +57786,20 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
                         visible = false;
                     }
                     var bSetChildOpacity = !extraData.isZeroValue;
-                    HighlightHelper.drawStroke(service, e, 'path, rect', prop.stroke, width);
+                    if (isAccEnable && isBarComb) {
+                        HighlightHelper.drawInnerStroke(
+                            service,
+                            e,
+                            'path, rect',
+                            event.data.byKeyboard ? "keyboard" : "hover",
+                            prop,
+                            extraData.strokeWidth,
+                            false,
+                            extraData
+                        );
+                    } else {
+                        HighlightHelper.drawStroke(service, e, 'path, rect', prop.stroke, width);
+                    }
                     HighlightHelper.drawFill(service, e, 'path, rect', prop, isMarkerRenderExist, bSetChildOpacity);
                     if (!visible) {
                         setMakerOpacity(service, e);
@@ -57045,7 +57813,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
             "name": "clearPlot",
             "supportedChartTypes": lineType2
         },
-        "handler": function(event, service) {
+        "handler": function (event, service) {
             service.fireEvent(event, true);
             service._getDecorationLayer().clear();
 
@@ -57061,8 +57829,10 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
             if (!mainNode || !mainNode.length) {
                 return;
             }
+
+            var isClickBlank = Object.keys(event.data).length <= 1;
             var isMarkerRenderExist = TypeUtils.isExist(properties.get('plotArea.markerRenderer'));
-            mainNode.forEach(function(e) {
+            mainNode.forEach(function (e) {
                 var width = 1;
                 var extraData = DataGraphics.getData(e) || {};
                 if (gray || bUseRange) {
@@ -57078,19 +57848,34 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
                     }
                 }
                 var bSetChildOpacity = !extraData.isZeroValue;
-                HighlightHelper.drawStroke(service, e, 'path, rect', prop.stroke, width, undefined, extraData);
-                HighlightHelper.drawFill(service, e, 'path, rect', prop, isMarkerRenderExist, bSetChildOpacity);
+
+                if (isClickBlank) {
+                    HighlightHelper.drawInnerStroke(
+                        service, e, 'path, rect', "deselect",
+                        prop, width, undefined, extraData
+                    );
+
+                    HighlightHelper.drawFill(service, e, 'path, rect', prop, isMarkerRenderExist, bSetChildOpacity);
+
+                    d3.select(e).selectAll('rect, path')
+                        .attr("clip-path", null)
+                        .attr("stroke-width", width)
+                        .attr("stroke-dasharray", null);
+                } else {
+                    HighlightHelper.drawStroke(service, e, 'path, rect', prop.stroke, width, undefined, extraData);
+                    HighlightHelper.drawFill(service, e, 'path, rect', prop, isMarkerRenderExist, bSetChildOpacity);
+                }
                 setMakerOpacity(service, e);
             });
         }
-    },{
+    }, {
         "id": "hover_range_selection_line",
         "triggerEvent": {
             "name": "hover",
             "supportedChartTypes": TimeLineAndComb,
             "targets": "v-m-action-layerrange"
         },
-        "handler": function(event, service) {
+        "handler": function (event, service) {
             DPBhvrHdlr.showDetailForRangeSelectionWhenHover(event, service);
         }
     }, {
@@ -57100,7 +57885,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
             "supportedChartTypes": timeLineType,
             "targets": "v-m-plot"
         },
-        "handler": function(event, service) {
+        "handler": function (event, service) {
             DPBhvrHdlr.hoverOnLineDuringBigData(event, service);
         }
     }, {
@@ -57110,7 +57895,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
             "supportedChartTypes": timeLineType,
             "excludeTargets": ["v-m-plot", Constants.CSS.CLASS.DATAPOINTS_MODULE]
         },
-        "handler": function(event, service) {
+        "handler": function (event, service) {
             if (service.getStatus("rangeSelection")) {
                 return;
             }
@@ -57127,7 +57912,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
             "supportedChartTypes": timeLineType,
             "excludeTargets": [CSS_CLASS.DATAPOINT, CSS_CLASS.DATALABEL]
         },
-        "handler": function(event, service) {
+        "handler": function (event, service) {
             if (service.isBigDataMode() || service.getStatus("rangeSelection")) {
                 return;
             }
@@ -57140,19 +57925,18 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
             "supportedChartTypes": lineType,
             "excludeTargets": HighlightHelper.getDeselAllExTargets(),
         },
-        "handler": function(event, service) {
+        "handler": function (event, service) {
 
-            if(!service.getProperties().get("interaction.enableDeselectAll")){
+            if (!service.getProperties().get("interaction.enableDeselectAll")) {
                 return;
             }
-            // For time combination chart in big data mode, we process in "click_on_time_comb_during_big_data" already
-            if (service.isBigDataMode() && timeCombTypes.indexOf(service._getChartType()) > -1 ) {
+            if (service.isBigDataMode() && timeCombTypes.indexOf(service._getChartType()) > -1) {
                 return;
             }
 
-            if(TimeLineAndComb.indexOf(service._getChartType()) > -1){
+            if (TimeLineAndComb.indexOf(service._getChartType()) > -1) {
                 DPBhvrHdlr.clickOnLineDuringBigData(event, service);
-            }else{
+            } else {
                 service.fireEvent(event, true);
             }
 
@@ -57163,7 +57947,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
             "name": "clearPlot",
             "supportedChartTypes": TimeLineAndComb
         },
-        "handler": function(event, service) {
+        "handler": function (event, service) {
             service.fireEvent(event, true);
             if (!event.data.rangeSelection) {
                 service._getDecorationLayer().clear();
@@ -57177,7 +57961,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
             "name": "down",
             "supportedChartTypes": TimeLineAndComb
         },
-        "handler": function(event, service) {
+        "handler": function (event, service) {
             DPBhvrHdlr.updateRangeEffect(event, service);
         }
     }, {
@@ -57187,7 +57971,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForLine',[
             "name": "up",
             "supportedChartTypes": TimeLineAndComb
         },
-        "handler": function(event, service) {
+        "handler": function (event, service) {
             DPBhvrHdlr.recoverRangeEffect(event, service);
         }
     }];
@@ -76858,6 +77642,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForPie',[
 
             var elements = HighlightHelper.turnToArray(event.data.targets);
             var propMgr = service.getProperties();
+            var isAccEnable = propMgr.get('interaction.enableAccUpdates');
             var prop = propMgr.get('interaction.hover');
             var hoverPaddingWidth = 2;
             var hoverBorderWidth = parseFloat(HighlightHelper.getWidth(prop.stroke.width, 2));
@@ -76867,6 +77652,10 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForPie',[
 
                 if ((d3.select(e).classed(CSS_CLASS.DATAPOINTSELECTED) && !DataGraphics.getData(e).isZeroValue) ||
                     !prop.stroke.visible || hoverBorderWidth === 0) {
+                    if(isAccEnable) {
+                        e.firstChild.setAttribute('stroke', 'none');
+                        e.firstChild.setAttribute("stroke-width", null);
+                    }
                     return;
                 }
 
@@ -76920,6 +77709,10 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForPie',[
                     newline.setAttribute("stroke-width", parseFloat(prop.stroke.width) / 2 + "px");
                     newline.setAttribute("stroke-dasharray", dasharray);
                     zeroValueHoverNode.appendChild(newline);
+                    if(isAccEnable) {
+                        e.firstChild.setAttribute('stroke', 'none');
+                        e.firstChild.setAttribute("stroke-width", null);
+                    }
                     e.parentNode.appendChild(zeroValueHoverNode);
                 } else {
                     var newPath = SVG.create("path");
@@ -76939,6 +77732,10 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForPie',[
                             startAngle(startAngle + extraRadius).endAngle(endAngle - extraRadius)();
                     }
                     newPath.setAttribute("d", pathD);
+                    if(isAccEnable) {
+                        e.firstChild.setAttribute('stroke', 'none');
+                        e.firstChild.setAttribute("stroke-width", null);
+                    }
                     e.appendChild(newPath);
                 }
             });
@@ -76967,6 +77764,8 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForPie',[
             d3.select(parentNode).selectAll('.' + CSS_CLASS.ZEROVALUEHOVER).remove();
             var elements = HighlightHelper.turnToArray(event.data.targets);
             var prop;
+            var propMgr = service.getProperties();
+            var isAccEnable = propMgr.get('interaction.enableAccUpdates');
             elements.forEach(function(e) {
                 d3.select(e).selectAll("." + CSS_CLASS.PIE_HOVER_STROKE).remove();
 
@@ -76980,6 +77779,10 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForPie',[
                         prop = service.getProperties().get('plotArea.dataPoint');
                     }
                 }
+                if(isAccEnable && prop.stroke.visible) {
+                    e.firstChild.setAttribute('stroke', prop.stroke.color);
+                    e.firstChild.setAttribute("stroke-width", prop.stroke.width || 1);
+                }
                 HighlightHelper.drawStroke(service, e, 'path', prop.stroke, 1);
                 HighlightHelper.drawFill(service, e, 'path', prop,
                         TypeUtils.isExist(service.getProperties().get('plotArea.markerRenderer')));
@@ -77316,18 +78119,16 @@ define('sap/viz/chart/components/renderers/TreeMapDimensionLabelRenderer',["sap/
             color = props.dimensionLabel.style.color;
         } else {
             if (config.isLeafItem) {
+                var accFontColor = ACCStyleUtils.getTextColor(bgColor);
+                var fontColor = ColorUtil.getDataLabelColor(bgColor);
                 if (props.dataLabel.visible && props.dataLabel.style.color) {
                     if(props.dataLabel.style.colorRange === 'outside'){
-                        color = enableAcc ? ACCStyleUtils.getTextColor(bgColor) 
-                        :
-                        ColorUtil.getDataLabelColor(bgColor);
+                        color = enableAcc ? accFontColor || fontColor : fontColor;
                     }else{
                         color = props.dataLabel.style.color;
                     }
                 } else {
-                    color = enableAcc ? ACCStyleUtils.getTextColor(bgColor) 
-                    :
-                    ColorUtil.getDataLabelColor(bgColor);
+                    color = enableAcc ? accFontColor || fontColor : fontColor;
                 }
             } else {
                 color = textColor(config);
@@ -77355,7 +78156,7 @@ define('sap/viz/chart/components/renderers/TreeMapDimensionLabelRenderer',["sap/
         label.setAttribute("font-family", labelStyle.fontFamily);
         label.setAttribute('fill-opacity', 1);
         label.setAttribute('aria-hidden','true');
-        if (config.enableAcc) {
+        if (config.enableAcc && textShadow) {
             label.setAttribute('style', "text-shadow:" + textShadow + ";");
         }
         label.value = config.data.label;
@@ -78437,7 +79238,8 @@ define('sap/viz/chart/components/plots/treemap/TreeMapPlot',[
     'sap/viz/chart/components/renderers/TreeMapDimensionLabelRenderer',
     "sap/viz/chart/components/accessibility/ChartComponentNavigatorFactory",
     "sap/viz/chart/components/accessibility/TreeMapDataPointNavigator",
-    "sap/viz/chart/components/util/ChartConstants"
+    "sap/viz/chart/components/util/ChartConstants",
+    "sap/viz/framework/common/util/ACCStyleUtils"
 ], function Setup(oo,
     TypeUtils,
     TextUtils,
@@ -78456,7 +79258,8 @@ define('sap/viz/chart/components/plots/treemap/TreeMapPlot',[
     TreeMapDimensionLabelRenderer,
     ChartNavigator,
     DataPointNavigator,
-    ChartConstants) {
+    ChartConstants,
+    ACCStyleUtils) {
 
     var m_className = "v-treemap", 
         m_classNameItem = "v-treemapitem", 
@@ -78613,6 +79416,24 @@ define('sap/viz/chart/components/plots/treemap/TreeMapPlot',[
         }
     };
 
+    TreeMapPlot.prototype._buildWrapperConfig = function (data, position, context, option) {
+        var config = TreeMapPlot.superclass._buildWrapperConfig.apply(this, arguments);
+
+        var enableAccUpdates = this._properties.origin.get('interaction.enableAccUpdates') || false;
+        if (enableAccUpdates) {
+            config.graphic.innerStroke = {
+                color: ACCStyleUtils.getBorderColor(config.graphic.fill),
+                width: ACCStyleUtils.getBorderWidth(),
+                visible: true,
+                rectDifference: 2,
+                x: 0,
+                y: 0
+            };
+        }
+
+        return config;
+    };
+
     function setupItems(gItems, plot, option){
         gItems.each(function(d) {
             var dpConfig = plot._buildWrapperConfig(d.rawdata, {width:d.width, height:d.height}, d.ctx, option);
@@ -78620,7 +79441,11 @@ define('sap/viz/chart/components/plots/treemap/TreeMapPlot',[
             d.color = dpData.color;
             DataGraphics.setData(this, dpData);
             DataPointUtils.setDataPointId(this, d.rawdata.dp.id);
-        }); 
+            d.innerStrokeConfig = (dpConfig && 
+                                    dpConfig.graphic && 
+                                    dpConfig.graphic.innerStroke && 
+                                    dpConfig.graphic.innerStroke.visible) ? dpConfig : null;
+        });
     }
     
     TreeMapPlot.prototype._drawTreeMapItems = function(treeLevelRoot, rectObjs, redrawAll, iLevel,
@@ -78686,6 +79511,7 @@ define('sap/viz/chart/components/plots/treemap/TreeMapPlot',[
             });
             return rectRes;
         };
+        var innerStrokeNodes = [];
         var drawRect = function(rect) {
             var rectRes = rect.attr("x", function(d) {
                 return (isLeafItem) ? (0) : (d.left + padding);
@@ -78710,6 +79536,13 @@ define('sap/viz/chart/components/plots/treemap/TreeMapPlot',[
             .attr('stroke-width', function(d) {
                 return isLeafItem ? d.strokeWidth : undefined;
             });
+            rectRes.each(function (d) {
+                var rectNode = this;
+                if (isLeafItem && iLevel > 0 && d.innerStrokeConfig) {
+                    rectNode._innerStrokeConfig = d.innerStrokeConfig;
+                    innerStrokeNodes.push(rectNode);
+                }
+            });
             if (!isLeafItem) {
                 rectRes.attr("fill-opacity", 1);
             }
@@ -78793,6 +79626,12 @@ define('sap/viz/chart/components/plots/treemap/TreeMapPlot',[
             }
             //add labels
             drawLabels(gItems, this._labelVisibility);
+            innerStrokeNodes.forEach(function (rectNode) {
+                if (rectNode._innerStrokeConfig) {
+                    ACCStyleUtils.renderInnerStroke(rectNode._innerStrokeConfig, rectNode);
+                    delete rectNode._innerStrokeConfig;
+                }
+            });
         }
    
         //draw children recursively
@@ -80974,6 +81813,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForTreeMap',[
     var treeType = [
         "info/treemap"
     ];
+    var rectCache = {};
     treeType = ChartTypeUtils.addTrellisType(treeType);
     var CSS_CLASS = Constants.CSS.CLASS;
 
@@ -81029,6 +81869,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForTreeMap',[
             var elements = HighlightHelper.turnToArray(event.data.targets);
             var prop = service.getProperties().get('interaction.hover');
             elements.forEach(function(e) {
+                HighlightHelper.setRectCache(e, rectCache);
                 if (!event.data.byKeyboard) {
                     HighlightHelper.drawStroke(service, e, 'rect', prop.stroke, 2);
                 }
@@ -81060,7 +81901,9 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForTreeMap',[
                 HighlightHelper.drawStroke(service, e, 'rect', prop.stroke, 1);
                 HighlightHelper.drawFill(service, e, 'rect', prop,
                         TypeUtils.isExist(service.getProperties().get('plotArea.markerRenderer')));
+                HighlightHelper.mergeRectContent(e, rectCache);
             });
+            HighlightHelper.resetRectCache(rectCache);
         }
     }, {
         "id": "clearPlot_tree",
@@ -81741,6 +82584,17 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
             effectManager: this._effectManager,
             categoryAxis : dpConfig.categoryAxis
         };
+        var enableAccUpdates = this._properties.origin.get('interaction.enableAccUpdates') || false;
+        if (enableAccUpdates) {
+            config.graphic.innerStroke = {
+                color: ACCStyleUtils.getBorderColor(config.graphic.fill),
+                width: ACCStyleUtils.getBorderWidth(),
+                visible: true,
+                rectDifference: 1,
+                x: 0.5,
+                y: 0.5
+            };
+        }
         if(this._strokeProp && this._strokeProp.visible && config.graphic) {
             config.graphic.stroke = this._strokeProp.color;
             config.graphic.strokeWidth = '1px';
@@ -81873,7 +82727,8 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
         var textShadow = null;
         if (enableAccUpdates) {
             var referColor = context.referColor || context.background;
-            fontColor = ACCStyleUtils.getTextColor(referColor);
+            var accFontColor = ACCStyleUtils.getTextColor(referColor);
+            fontColor = accFontColor? accFontColor : fontColor;
             textShadow = ACCStyleUtils.getTextShadowStyle(referColor);
         }
         
@@ -81929,6 +82784,7 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
                 }
             }
 
+
             var selection = d3.select(textNode)
                 .attr("font-size", fontSize)
                 .attr("font-weight", fontWeight)
@@ -81989,6 +82845,7 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
         var options = {
             disableSemantic: false
         };
+        var innerStrokeNodes = [];
         for(dpNum = 0; dpNum < dpConfigArray.length; dpNum++){
             dpConfig = dpConfigArray[dpNum];
             dpConfig.options = options;
@@ -82004,8 +82861,18 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
             Constants.CSS.CLASS.MORPHABLEDATAPOINT + ' ' + Constants.CSS.CLASS.DATAPOINTDEFAULT);
             dpTranslateNode.setAttribute("transform", 'translate(' + dpConfig.x + "," + dpConfig.y + ')');
             dataPointG.appendChild(dpTranslateNode);
+            var rectNode = dpTranslateNode.querySelector("rect");
+            if (rectNode && rectNode._innerStrokeConfig) {
+                innerStrokeNodes.push(rectNode);
+            }
         }
         selection.node().appendChild(dataPointG);
+        innerStrokeNodes.forEach(function(rectNode) {
+            if (rectNode._innerStrokeConfig) {
+                ACCStyleUtils.renderInnerStroke(rectNode._innerStrokeConfig, rectNode);
+                delete rectNode._innerStrokeConfig;
+            }
+        });
         this._drawHeatMapDataLabels(selection);
     };