@sapui5/sap.viz 1.140.0 → 1.141.0

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

@@ -1688,6 +1688,7 @@ define('sap/viz/chart/components/util/TextUtils',['sap/viz/framework/common/util
     });
 
 define('sap/viz/chart/components/title/Title',[
+    'sap/viz/framework/common/util/Constants',
     'sap/viz/framework/common/util/oo',
     'sap/viz/chart/components/UIComponent',
     'sap/viz/framework/common/lang/LangManager',
@@ -1697,7 +1698,8 @@ define('sap/viz/chart/components/title/Title',[
     'sap/viz/framework/common/util/UADetector',
     'sap/viz/framework/common/util/PropertyZoneUtil',
     'sap/viz/framework/common/util/TitleUtil'
-], function(oo, UIComponent, langManager, BoundUtil, TextUtils, StyleUtils, UADetector, PropertyZoneUtil,TitleUtil) {
+], function(Constants,oo, UIComponent,langManager, BoundUtil, TextUtils,
+    StyleUtils,UADetector,PropertyZoneUtil,TitleUtil) {
 
     var Title = function(runtime, options) {
         Title.superclass.constructor.apply(this, arguments);
@@ -1938,12 +1940,20 @@ define('sap/viz/chart/components/title/Title',[
             var fill = this.runtime().effectManager().register({
                 fillColor: style.color
             });
+            /**
+             *  role="heading":
+             *  A semantic attribute that helps screen readers, 
+             *  better understand and announce the content structure.
+             *  aria-level="1" :  Indicates the heading level.
+             **/
+            var ariaLevel = parseInt(this._properties.get('ariaLevel'));
+            ariaLevel = ariaLevel > 0 ? ariaLevel : Constants.TITLE.ARIALEVEL;
             wrapper.attr('fill', fill).attr('font-family', style.fontFamily).attr('font-size', style.fontSize).attr(
                 'font-weight', style.fontWeight).attr('font-style', style.fontStyle)
                 .attr('text-anchor', textAnchor).attr('x', xPos)
                 .attr('y', 'top' == this.getPosition() ? this._pfSize.height/2 : height - this._pfSize.height/2)
-                .attr('dominant-baseline', 'central');
-
+                .attr('dominant-baseline', 'central').attr('role', 'heading').attr('aria-level', ariaLevel);
+                
             if (UADetector.isIE()) {
                 wrapper.attr('y', 'top' == this.getPosition() ? this._pfSize.height : height)
                 .attr('dominant-baseline', 'auto');
@@ -4214,6 +4224,79 @@ define('sap/viz/chart/components/util/ColorUtil',["sap/viz/framework/common/util
         return bgColor;
     };
 
+    function parseColorToRgbArray(color) {
+        if (color === null || typeof color === 'undefined') { return null; }
+        try {
+            var c = d3.rgb(String(color).trim());
+            // d3.rgb returns NaN components for invalid input; guard against that
+            if (isNaN(c.r) || isNaN(c.g) || isNaN(c.b)) { return null; }
+            return [c.r, c.g, c.b];
+        } catch (e) {
+            return null;
+        }
+    }
+
+    /**
+     * Calculates the relative luminance of an RGB color, as per WCAG 2.1.
+     * @param {number[]} rgb - An array of [R, G, B] values.
+     * @returns {number} The relative luminance value (0-1).
+     */
+    function getLuminance(rgb) {
+        var r = rgb[0];
+        var g = rgb[1];
+        var b = rgb[2];
+        // Convert RGB values from 0-255 to 0-1
+        function gammaCorrection(v) {
+            v /= 255;
+            // Apply gamma correction formula
+            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+        }
+
+        r = gammaCorrection(r);
+        g = gammaCorrection(g);
+        b = gammaCorrection(b);
+
+        // Calculate luminance with specified weights
+        // https://www.w3.org/WAI/GL/wiki/Relative_luminance#:~:text=Note%201:%20For%20the%20sRGB,+0.055)/1.055)%20%5E%202.4
+        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    }
+
+    /**
+     * Calculates the contrast ratio between two hex colors and checks if it meets a given threshold.
+     * Defaults follow WCAG guidance:
+     *  - text (normal text) minimum: 4.5
+     *  - non-text / large-text / graphics minimum: 3.0
+     *  - High contrast mode minimum: 7.0
+     * @param {string} color1 - The first hex color string (e.g., '#333333').
+     * @param {string} color2 - The second hex color string (e.g., '#F0F0F0').
+     * @param {number} [threshold=3] - The minimum contrast ratio required. Defaults to 3.
+     * @returns {{ratio: number, meetsThreshold: boolean}} An object containing the calculated ratio and a boolean.
+     */
+    ColorUtil.checkColorContrast = function (color1, color2, threshold) {
+        // keep existing behavior: if threshold not provided, fallback to 3
+        if (typeof threshold !== 'number') { threshold = 3; }
+
+        var rgbArr1 = parseColorToRgbArray(color1);
+        var rgbArr2 = parseColorToRgbArray(color2);
+        if (!rgbArr1 || !rgbArr2) {
+            return { ratio: 0, meetsThreshold: false };
+        }
+
+        var luminance1 = getLuminance(rgbArr1);
+        var luminance2 = getLuminance(rgbArr2);
+
+        var lighter = Math.max(luminance1, luminance2);
+        var darker = Math.min(luminance1, luminance2);
+        // +0.05 in WCAG for preventing division by zero. eg. black (#000000) has luminance of 0.
+        var ratio = (lighter + 0.05) / (darker + 0.05);
+        var meetsThreshold = ratio >= threshold;
+
+        return {
+            ratio: parseFloat(ratio.toFixed(2)),
+            meetsThreshold: meetsThreshold
+        };
+    };
+
     return ColorUtil;
 });
 
@@ -9944,6 +10027,7 @@ return {
         "plotArea.dataPoint.stroke.color": "#000000",
         "plotArea.dataPoint.stroke.visible": false,
         "title.alignment": "center",
+        "title.ariaLevel": 2,
         "title.layout.height": null,
         "title.layout.maxHeight": 0.2,
         "title.layout.respectPlotPosition": true,
@@ -10047,6 +10131,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -10277,6 +10362,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -10540,6 +10626,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.behavior": {
             "access": "internal",
@@ -10716,6 +10803,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.behavior": {
             "access": "internal",
@@ -10977,6 +11065,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -12105,6 +12194,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -14115,6 +14205,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -14714,6 +14805,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -15107,6 +15199,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -16541,6 +16634,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectByTimeAxisGroup": {
             "access": "internal",
@@ -16853,6 +16947,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -17142,6 +17237,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -17942,16 +18038,22 @@ define('sap/viz/chart/behavior/config/handler/AxisBehaviorHandler',[
         if (!isTriggerable(service) || isOnFirstLastOnlyAxis(event, service)) {
             return;
         }
-
+        var isAccEnable = service && service.getProperties().get("interaction.enableAccUpdates");
         var isRadarChart = service._getRenderType().indexOf("radar") > -1;
         var polarAxis = "plotArea.polarAxis";
         var axisName = isRadarChart ? polarAxis : getAxisName(event);
         service.fireEvent("processUnhighlight");
         var color = service.getProperties().get(axisName + ".hoverShadow.color");
         if (color) {
-            d3.select(event.data.currentTarget).select("rect")
-            .attr("fill", event.data.byKeyboard ? "transparent" : color)
-            .classed(CSS_CLASS.HOVER_SHADOW, true);
+            if(isAccEnable){
+                d3.select(event.data.currentTarget).select("polygon")
+                .attr("fill", event.data.byKeyboard ? "transparent" : color)
+                .classed(CSS_CLASS.HOVER_SHADOW, true);
+            }else{
+                d3.select(event.data.currentTarget).select("rect")
+                .attr("fill", event.data.byKeyboard ? "transparent" : color)
+                .classed(CSS_CLASS.HOVER_SHADOW, true);
+            }
         }
 
         //get targets. Hovering on data points does not support trellis.
@@ -18100,9 +18202,19 @@ define('sap/viz/chart/behavior/config/handler/AxisBehaviorHandler',[
         }
 
         var color;
+        var lineColor = service.getProperties().get("interaction.selected.stroke.color");
+        var outlineWidth = service.getProperties().get("interaction.keyboard.width");
+
         if(isTriggerable(service)) {
+            var radar = service._getChartType().toLowerCase() === 'radar';
             var axisName = getAxisName(event);
+
+            if(radar){
+                axisName = 'plotArea.polarAxis'; 
+            }
+
             color = service.getProperties().get(axisName+".mouseDownShadow.color");
+           
         }
         else if(isTimeAxisTriggerable(service)) {
             color = service.getProperties().get("timeAxis"+".mouseDownShadow.color");
@@ -18110,13 +18222,19 @@ 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) {
-            d3.select(event.data.currentTarget).select("rect")
+            d3.select(event.data.currentTarget).select(label_selector)
             .attr("fill", color)
-            .classed(CSS_CLASS.FOCUS_SHADOW, true);
+            .classed(CSS_CLASS.FOCUS_SHADOW, true)
+            .attr("stroke", lineColor)
+            .attr("stroke-width", outlineWidth);
         }
     };
 
@@ -18126,7 +18244,13 @@ define('sap/viz/chart/behavior/config/handler/AxisBehaviorHandler',[
         }
         var color;
         if(isTriggerable(service)) {
+            var radar = service._getChartType().toLowerCase() === 'radar';
             var axisName = getAxisName(event);
+
+            if(radar){
+                axisName = 'plotArea.polarAxis'; 
+            }
+            
             color = service.getProperties().get(axisName+".hoverShadow.color");
         }
         else if(isTimeAxisTriggerable(service)) {
@@ -18141,10 +18265,13 @@ define('sap/viz/chart/behavior/config/handler/AxisBehaviorHandler',[
         if (UADetector.isMobile()) {
             axisBackground.classed(CSS_CLASS.HOVER_SHADOW, false);
         } else {
+            var label_selector = service.NodeType.AXIS_ITEM_BACKGROUND.get('value');
             if (color) {
-                d3.select(event.data.currentTarget).select("rect")
+                d3.select(event.data.currentTarget).select(label_selector)
                 .attr("fill", color)
-                .classed(CSS_CLASS.HOVER_SHADOW, true);
+                .classed(CSS_CLASS.HOVER_SHADOW, true)
+                .attr("stroke", null)
+                .attr("stroke-width", null);
             }
         }
     };
@@ -20433,7 +20560,9 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
     'sap/viz/framework/common/util/DOM',
     "sap/viz/framework/common/util/DataGraphics",
     "sap/viz/framework/common/util/TypeUtils",
-    "sap/viz/chart/behavior/config/ContextualDataUtil"
+    "sap/viz/chart/behavior/config/ContextualDataUtil",
+    "sap/viz/framework/common/util/ACCStyleUtils",
+    "sap/viz/chart/components/util/ColorUtil"
 ], function(
     Constants,
     SDKConstants,
@@ -20446,7 +20575,9 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
     DOM,
     DataGraphics,
     TypeUtils,
-    ContextualDataUtil
+    ContextualDataUtil,
+    ACCStyleUtils,
+    ColorUtil
 ) {
     var BehaviorConstants = SDKConstants.BEHAVIOR;
     var CSS_CLASS = Constants.CSS.CLASS;
@@ -21458,7 +21589,7 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
 
         var plot = service.getModule("main.plot");
         var dataModel = service.getDataModel();
-
+        
         elements.forEach(function (e) {
             if(service.isTrellis()){
                 //bar
@@ -21473,7 +21604,6 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
                         HighlightHelper.drawStroke(service, e, 'path, rect', prop.stroke, 2);
                         HighlightHelper.drawFill(service, e, 'path, rect', prop, isMarkerRendererExist, true);
                     } else {
-                        //bar
                         if (!event.data.byKeyboard) {
                             var extraData = DataGraphics.getData(e);
                             HighlightHelper.drawStroke(service, e, 'rect', prop.stroke, 2, undefined, extraData);
@@ -21508,7 +21638,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) {
             var dataId = DataPointUtils.getDataPointId(e);
             var dataPoint = dataModel.getDataPoint(dataId);
@@ -21542,6 +21672,29 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
                     }
                 }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;
+                            }
+                        }
+                    }
                     HighlightHelper.drawStroke(service, e, 'rect', prop.stroke, width, undefined, extraData);
                     HighlightHelper.drawFill(service, e, 'rect, path', prop, isMarkerRendererExist);
                 }
@@ -27422,6 +27575,7 @@ define('sap/viz/chart/behavior/config/ScreenReaderUtil',[
     var HOURS = "hours";
     var MINUTES = "minutes";
     var SENCONDS = "senconds";
+    var CATEGORY_LABEL_ID = "categorylabel-id";
     var LEGEND_ITEM = Constants.CSS.CLASS.LEGENDITEM;
     var MBC_LEGEND_ITEM = Constants.CSS.CLASS.MBCLEGENDITEM;
     var SELECTED = Constants.CSS.CLASS.SELECTED;
@@ -27619,7 +27773,10 @@ define('sap/viz/chart/behavior/config/ScreenReaderUtil',[
                 // .attr('aria-setsize', service.getDataModel().getDataPointCount())
                 if (!isNonInteractive) {
                     var parent = d3.select(target).node().parentNode;
-                    d3.select(target).attr("role", "option");
+                    var dataId = parseInt(DataPointUtils.getDataId(target)) + 1;
+                    var dataSize = service.getDataModel().getDataPointCount();
+                    d3.select(target).attr("role", "option").attr('aria-posinset', dataId)
+                    .attr('aria-setsize', dataSize);
                     d3.select(parent).attr("role", "listbox");
                 }
                 break;
@@ -27629,7 +27786,10 @@ define('sap/viz/chart/behavior/config/ScreenReaderUtil',[
                 text = (isTimeseries ? ' Time Axis Item ' : ' Category Axis Item ') + text;
                 text += DataGraphics.getContext(target).text;
                 if (!isNonInteractive) {
-                    d3.select(target).attr("role", "option");
+                    var categorySize = d3.select(target.parentNode).selectAll('.v-axis-item').size();
+                    var categoryId = parseInt(d3.select(target).attr(CATEGORY_LABEL_ID) || 0)+1;
+                    d3.select(target).attr("role", "option").attr('aria-posinset', categoryId)
+                    .attr('aria-setsize', categorySize);
                 }
                 break;
             case 3:
@@ -27783,7 +27943,7 @@ define('sap/viz/chart/behavior/config/ScreenReaderUtil',[
         }
         text += ". ";
         if(!isNonInteractive) {
-            d3.select(target).attr('aria-label', text).attr('tabindex', 0).attr("focusable", true)
+            d3.select(target).attr('aria-label', text).attr("tabindex", 0).attr("focusable", true)
                 .style('outline', 'none');
             if(isSelectionFeedback){
                 var isLegendItemSelected = d3.select(target).attr('class').indexOf(LEGEND_ITEM + SELECTED);
@@ -27795,7 +27955,6 @@ define('sap/viz/chart/behavior/config/ScreenReaderUtil',[
                     d3.select(target).attr('aria-label', text + ' Selected');
                 }
             }
-
             if (typeof target.focus === "function") {
                 target.focus();
             } else {
@@ -27957,11 +28116,13 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
     var LEGEND_NODE_BOUND = Constants.CSS.CLASS.LEGEND_BOUND_SELECTION;
     var PLOT_NODE_BOUND = Constants.CSS.CLASS.PLOT_BOUND_SELECTION;
     var LEGEND_ITEM_BOUND = Constants.CSS.CLASS.LEGEND_ITEM_BOUND_SELECTION;
+    var AXIS_ITEM_NODE_BOUND_ACC = Constants.CSS.CLASS.AXIS_ITEM_BOUND_SELECTION_ACC;
     var AXIS_ITEM_NODE_BOUND = Constants.CSS.CLASS.AXIS_ITEM_BOUND_SELECTION;
     var DATAPOINTHOVER = Constants.CSS.CLASS.DATAPOINTHOVER;
     var ZEROVALUEHOVER = Constants.CSS.CLASS.ZEROVALUEHOVER;
     var ZERO_LINE_GROUP = Constants.CSS.CLASS.ZERO_LINE_GROUP;
     var STACK = Constants.CSS.CLASS.STACK;
+    var CLIPPATH = Constants.CSS.CLASS.CLIPPATH;
     var FOCUS_INSIDE_CLASS = "v-focusInside";
     var ZERO_FOCUS = {
         RECT: 2,
@@ -28357,13 +28518,13 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                 if (dps) {
                     dps.forEach(function(target) {
                         highlightNode(mainBoundNode,
-                            d3.select(target), boundNode, highlightProps);
+                            d3.select(target), boundNode, highlightProps, service);
                     });
                 }
             } else {
                 highlightNode(mainBoundNode, isTreeMapHeader ?
                     d3.select(hoveredTargetNode.parentNode) :
-                    d3.select(hoveredTargetNode), boundNode, highlightProps);
+                    d3.select(hoveredTargetNode), boundNode, highlightProps, service);
             }
         }
     };
@@ -28468,7 +28629,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
         return closestNode;
     };
 
-    var highlightNode = function(mainBoundNode, hoverNode, selectBound, properties) {
+    var highlightNode = function (mainBoundNode, hoverNode, selectBound, properties, service) {
         blurNode(hoverNode);
         var d3Node = hoverNode.select(selectBound),
             currentNode = d3Node.node();
@@ -28476,7 +28637,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
             return;
         }
         var stackNode = d3.select(hoverNode.node().parentNode).node();
-        var stackPos = TypeUtils.isExist(stackNode) ? 
+        var stackPos = TypeUtils.isExist(stackNode) ?
             stackNode.getBoundingClientRect() : {};
         var data = DataGraphics.getData(currentNode);
         if (TypeUtils.isExist(data)) {
@@ -28485,63 +28646,87 @@ 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';
+            }
+
         var boundNode = hoverNode.append("g").attr("class", "v-m-highlight");
         var bound = {
             rect: null,
-            line: null
+            line: null,
+            polygon: null
         };
-
         var isStackedChart;
         if (properties.renderType) {
             isStackedChart = properties.renderType.indexOf('stacked') > -1;
         }
-
         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" );
         } 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("shape-rendering", "crispEdges").style("pointer-events", "none");
+            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"))
+                    .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")
+                    .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("shape-rendering", "crispEdges").style("pointer-events", "none");
+            }
         }
 
         if (selectBound === "rect" || selectBound === "path") {
             var transform = SVG.getTransformToElement(currentNode, hoverNode.node());
-            var axisNode = d3.select(CATEGORYAXIS_NODE_BOUND).node() || 
+            var axisNode = d3.select(CATEGORYAXIS_NODE_BOUND).node() ||
                 d3.select(CATEGORYAXIS2_NODE_BOUND).node() || d3.select(TIMEAXIS_NODE_BOUND).node();
-            var axisPos = TypeUtils.isExist(axisNode) ? 
+            var axisPos = TypeUtils.isExist(axisNode) ?
                 axisNode.getBoundingClientRect() : {};
             var plotNode = d3.select(PLOT_NODE_BOUND).node();
-            var plotPos = TypeUtils.isExist(plotNode) ? 
+            var plotPos = TypeUtils.isExist(plotNode) ?
                 plotNode.getBoundingClientRect() : {};
             var zeroLineNode = d3.select('.' + ZERO_LINE_GROUP).node();
-            var zeroLinePos = TypeUtils.isExist(zeroLineNode) ? 
+            var zeroLinePos = TypeUtils.isExist(zeroLineNode) ?
                 zeroLineNode.getBoundingClientRect() : {};
             var wtfLineNode = [];
             if (properties.isZeroValue) {
                 var wtf = d3.selectAll('.v-wtf-linkline');
-                for (var i = 0; i < wtf[0].length; ++i) {
-                    wtfLineNode.push(wtf[0][i]);
+                for (var q = 0; q < wtf[0].length; ++q) {
+                    wtfLineNode.push(wtf[0][q]);
                 }
             }
             var hoverPos = boundNode.node().getBoundingClientRect();
-            var wtfLinePos = wtfLineNode.length > 0 ? 
+            var wtfLinePos = wtfLineNode.length > 0 ?
                 getWTFLineNode(wtfLineNode, hoverPos, !properties.isVerticalRender).getBoundingClientRect() : {};
             if (properties.isZeroValue && properties.isZeroOnFirstTab) {
                 if (properties.isVerticalRender) {
-                    properties.bCloseCategory = (axisPos.top <= hoverPos.top) || 
+                    properties.bCloseCategory = (axisPos.top <= hoverPos.top) ||
                         (plotPos.top <= hoverPos.top);
                 } else {
-                    properties.bCloseCategory = (axisPos.right <= hoverPos.left) || 
+                    properties.bCloseCategory = (axisPos.right <= hoverPos.left) ||
                         (plotPos.right <= hoverPos.left);
                 }
             }
@@ -28551,14 +28736,14 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                 }
                 transform = reShapeTransform(transform, properties);
                 boundNode.attr("transform", "translate(" + transform.e + "," + transform.f + ") " +
-                "scale(" + transform.a + "," + transform.d + ") ");
+                    "scale(" + transform.a + "," + transform.d + ") ");
             } else {
                 var posTransformLine, negTransformLine;
                 negTransformLine = {
-                    a: properties.isVerticalRender ? 0 : 
-                        isPercentageStackedChart(properties.renderType) ? 
-                        (-1) * 0.5 * ZERO_FOCUS.LINE : 0.5 * ZERO_FOCUS.LINE,
-                    b: properties.isVerticalRender ? isPercentageStackedChart(properties.renderType) ? 
+                    a: properties.isVerticalRender ? 0 :
+                        isPercentageStackedChart(properties.renderType) ?
+                            (-1) * 0.5 * ZERO_FOCUS.LINE : 0.5 * ZERO_FOCUS.LINE,
+                    b: properties.isVerticalRender ? isPercentageStackedChart(properties.renderType) ?
                         0.5 * ZERO_FOCUS.LINE : (-1) * 0.5 * ZERO_FOCUS.LINE : 0
                 };
                 posTransformLine = negTransformLine;
@@ -28594,11 +28779,11 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
             }
             if (TypeUtils.isExist(bound.line) || TypeUtils.isExist(bound.rect)) {
                 var pos = {
-                    plotPos: plotPos, 
+                    plotPos: plotPos,
                     axisPos: axisPos,
                     zeroLine: {
                         zeroLinePos: zeroLinePos,
-                        strokeWidth: TypeUtils.isExist(zeroLineNode) ? 
+                        strokeWidth: TypeUtils.isExist(zeroLineNode) ?
                             parseFloat(zeroLineNode.getAttribute('stroke-width')) : 0
                     },
                     hoverPos: hoverPos,
@@ -28667,19 +28852,21 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
             var parentRect = mainBoundNode.getBoundingClientRect();
             var intersectionBoundRect = BoundingBox.intersection(parentRect, svgRect);
             if (intersectionBoundRect) {
-                bound.rect.attr("width", intersectionBoundRect.width)
-                    .attr("height", intersectionBoundRect.height);
-                /*
-                * When there's scrollbar on the legend, set x = 0 or y = 0 instead of
-                * keeping x/y as null, will make the Chrome render differently
-                */
-                if (intersectionBoundRect.left !== svgRect.left) {
-                    bound.rect.attr("x", (parseFloat(d3Node.attr("x")) || 0) +
-                        intersectionBoundRect.left - svgRect.left);
-                }
-                if (intersectionBoundRect.top !== svgRect.top) {
-                    bound.rect.attr("y", (parseFloat(d3Node.attr("y")) || 0) +
-                        intersectionBoundRect.top - svgRect.top);
+                if(!isAccEnable || (selectBound !== AXIS_ITEM_NODE_BOUND_ACC)){
+                    bound.rect.attr("width", intersectionBoundRect.width)
+                        .attr("height", intersectionBoundRect.height);
+                    /*
+                    * When there's scrollbar on the legend, set x = 0 or y = 0 instead of
+                    * keeping x/y as null, will make the Chrome render differently
+                    */
+                    if (intersectionBoundRect.left !== svgRect.left) {
+                        bound.rect.attr("x", (parseFloat(d3Node.attr("x")) || 0) +
+                            intersectionBoundRect.left - svgRect.left);
+                    }
+                    if (intersectionBoundRect.top !== svgRect.top) {
+                        bound.rect.attr("y", (parseFloat(d3Node.attr("y")) || 0) +
+                            intersectionBoundRect.top - svgRect.top);
+                    }
                 }
             }
         }
@@ -28733,6 +28920,52 @@ 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
+
+            service._rootNode.selectAll('.v-datapoint[tabindex="0"]').attr("tabindex",null);
+            tabindex0 = service._rootNode.selectAll('[tabindex="0"]')[0];
+
+            var isTreeMap = function (service) {
+                var chartType = service._getRenderType();
+                return (chartType.indexOf("treemap") > -1);
+            };
+
+            var isHeatMap = function (service) {
+                var chartType = service._getRenderType();
+                return (chartType.indexOf("heatmap") > -1);
+            };
+
+            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"]')
+                .filter(not_legend_selector)
+                .attr("tabindex", null);
+            }else{
+                service._rootNode
+                .selectAll('[tabindex="0"]')
+                .filter(function(d,i){return i<tabindex0.length-1;})
+                .attr("tabindex", null);
+            }   
+
+        }
+    };
+
+
     var clearAllHoveredEffectAndStatus = function(service) {
         var hoveredTarget = service.getStatus("keyArrowHoveredDataPoint");
         if (isTreeMap(service) && hoveredTarget) {
@@ -28768,8 +29001,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
         service.setStatus("hoveredLegendLabelId", null);
         service.setStatus("hoveredRadarLabelId", null);
 
-        service._rootNode.selectAll('g[tabindex="0"]').attr('tabindex', -1);
-        service._rootNode.selectAll('g[focusable="true"]').attr('focusable', false);
+        service._rootNode.selectAll('[focusable="true"]').attr('focusable', null);
     };
 
     // make sure the direct handle functions only 2 parameters
@@ -28809,6 +29041,13 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
         var renderType = service._getRenderType();
         var isTreeMapHeader = false;
         var isRadarChart = service._getRenderType().indexOf('radar') > -1;
+        var isAccEnable = service && service.getProperties().get("interaction.enableAccUpdates");
+
+        //backwards tabbing (shift+tab into chart) -- remove chart border when backwards tabbing
+        var backwardsTabbingIdx = service.getStatus("backwardsTabbingIdx");
+        if(tabOrder === backwardsTabbingIdx && event.data.originalEvent.shiftKey){
+            d3.select(event.data.rootHandler).classed(FOCUS_INSIDE_CLASS, true);
+        }
 
         switch (tabOrder) {
             case 1:
@@ -28995,8 +29234,10 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                     if(axisBody.isOnlyShowingFirstAndLastLabel && axisBody.isOnlyShowingFirstAndLastLabel()){
                         return;
                     }
-
                     boundNode = AXIS_ITEM_NODE_BOUND;
+                    if(isAccEnable && !this._isTimeseries) {
+                        boundNode = AXIS_ITEM_NODE_BOUND_ACC;
+                    }
                     componentNavigator = this._isTimeseries ? this[TIMEAXIS_NAVIGATOR] :
                         ((tabOrder == 2) ? this[CATEGORYAXIS_NAVIGATOR] : this[CATEGORYAXIS2_NAVIGATOR]);
                     hoveredTargetNode = this._isTimeseries ? service.getStatus("keyArrowHoveredTimeLabel") :
@@ -29009,6 +29250,14 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                         if(this._isTimeseries) {
                             componentNavigator.updateCells(
                                 service.getModule("main.timeAxis.axisBody").getActiveLabels());
+                        }else{
+                            if (tabOrder == 2) {
+                                componentNavigator.updateCells(
+                                    service.getModule('main.categoryAxis.axisBody').getActiveLevels());
+                            }else{
+                                componentNavigator.updateCells(
+                                    service.getModule('main.categoryAxis2.axisBody').getActiveLevels());
+                            }
                         }
                         hoveredTargetId = componentNavigator.getFirstStartPoint().id;
                     } else if(isFocusAgain){
@@ -29269,6 +29518,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
     };
 
     var zoomKeyHandler = function(event, service) {
+        var isAccEnable = service && service.getProperties().get("interaction.enableAccUpdates");
         if (!service.getStatusManager().get("plot.zoom")) {
             return;
         }
@@ -29326,6 +29576,9 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                             hoveredCategoryId + "']");
                     service.setStatus("keyArrowHoveredTimeLabel", hoveredTarget);
                 } else {
+                    if(isAccEnable) {
+                        boundNode = AXIS_ITEM_NODE_BOUND_ACC;
+                    }
                     //Here use categoryLabel-id to query label because lazy rendering will mis-delete previous dom
                     hoveredCategoryId = service.getStatus("hoveredCategoryLabelId");
                     categoryGroupNode = service.getNodes(service.NodeType.CATEGORY_LABEL_GROUP);
@@ -29465,6 +29718,8 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
     KeyboardBehaviorHandler.prototype = {
         initialized: function(event, service) {
             service.setStatus("tabOrder", -1);
+            service.setStatus("backwardsTabbing", false);
+            service.setStatus("backwardsTabbingIdx", 1);
             this[MAIN_NODE] = service.getNodes(service.NodeType.MAIN_NODE);
             this[LEGEND_GROUP] = service.getNodes(service.NodeType.LEGEND_GROUP);
             this[PLOT_NODE] = service.getNodes(service.NodeType.PLOT_NODE);
@@ -29705,6 +29960,8 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
             service.removeStatus("tabOrder");
             service.removeStatus("hoveredTimeLabelId");
             service.removeStatus("orgHoveredTimeLabelId");
+            service.removeStatus("backwardsTabbing");
+            service.removeStatus("backwardsTabbingIdx");
         },
 
         uparrowHandler: function(event, service) {
@@ -29752,9 +30009,11 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                     });
                     var mainBoundNode = mainNode.select(boundNode).node();
                     highlightNode(mainBoundNode, d3.select(mainBoundNode.parentNode),
-                        ".v-bound", highlightProps);
+                        ".v-bound", highlightProps, service);
                 }
             };
+            var backwardstabbing = service.getStatus("backwardsTabbing");
+            var backwardsTabbingIdx = service.getStatus("backwardsTabbingIdx");
             
             if (currentIdx === -1) {
                 if (!shiftKey){
@@ -29765,7 +30024,13 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                     currentIdx = -1;
                     releaseTab = true;
                 }
+                //entry point from backwards tabbing
+                if(backwardstabbing && shiftKey){
+                    currentIdx = backwardsTabbingIdx;
+                    releaseTab = false;
+                }
                 service.setStatus("tabOrder", currentIdx);
+                service.setStatus("backwardsTabbing", false);
             } else {
                 switch (currentIdx) {
                     case 1:
@@ -29791,10 +30056,12 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                             }else {
                                 currentIdx = -1;
                                 releaseTab = true;
+                                backwardstabbing = true;
                             }
                         } else {
                             currentIdx = -1;
                             releaseTab = true;
+                            service._rootNode.selectAll('[tabindex="0"]').attr('tabindex', null);
                         }
                         break;
                     case 2:
@@ -29812,6 +30079,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                             else {
                                 currentIdx = -1;
                                 releaseTab = true;
+                                backwardstabbing = true;
                             }
                         } else {
                             boundNode = PLOT_NODE_BOUND;
@@ -29827,6 +30095,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                             } else {
                                 currentIdx = -1;
                                 releaseTab = true;
+                                backwardstabbing = true;
                             }
                         } else {
                             if (service._getRenderType().indexOf('radar') > -1) {
@@ -29850,6 +30119,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                         if (!shiftKey) {
                             currentIdx = -1;
                             releaseTab = true;
+                            backwardstabbing = true;
                         } else if (legendModule && legendModule.isVisible()) {
                             mainNode = this[LEGEND_GROUP];
                             boundNode = LEGEND_NODE_BOUND;
@@ -29867,10 +30137,17 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                     mode: "infoMode",
                     action: "interrupt"
                 });
+                
+                if(currentIdx>0){
+                    service.setStatus("backwardsTabbingIdx", currentIdx);
+                }
+
                 service.setStatus("tabOrder", currentIdx);
+                service.setStatus("backwardsTabbing", backwardstabbing);
 
                 if (releaseTab) {
                     clearAllHoveredEffectAndStatus(service);
+                    clearTabIndexForTabbingOut(service);
                     if (event && event.data && event.data.rootHandler) {
                         d3.select(event.data.rootHandler).classed(FOCUS_INSIDE_CLASS, false);
                     }
@@ -32862,7 +33139,6 @@ define('sap/viz/chart/views/ChartView',[
 
         this._rootContainer = rootElement.node().parentNode;
         if (this._rootContainer) {
-            this._rootContainer.setAttribute("tabIndex", this._properties.get('general.tabIndex'));
             if (this._outline.visible || this._properties.get("interaction.enableKeyboard")) {
                 this._rootContainer.style.outline = null;
             } else {
@@ -35128,9 +35404,10 @@ define('sap/viz/chart/components/axis/sub/AxisTitle',[
     "sap/viz/framework/common/util/UADetector",
     "sap/viz/framework/common/util/NameColorUtils",
     "sap/viz/framework/common/util/DataGraphics",
-    "sap/viz/migrate/PropertyUtil"
+    "sap/viz/migrate/PropertyUtil",
+    "sap/viz/framework/common/util/ACCStyleUtils"
 ], function(Constants, oo, AxisComponent, TypeUtils, NumberUtils, StyleUtils,
-    TextUtils, UADetector, NameColorUtils, DataGraphics, PropertyUtil) {
+    TextUtils, UADetector, NameColorUtils, DataGraphics, PropertyUtil, ACCStyleUtils) {
 
     var AXIS_CLASS_NAMES = Constants.CSS.CLASS.AXIS;
 
@@ -35170,7 +35447,12 @@ define('sap/viz/chart/components/axis/sub/AxisTitle',[
         if(this._isApplyAxisLineColor()){
             value = this._properties.get('color');
         }
-        return this._isAllHidden() ? Constants.AXIS.HIDDEN_TITLE.COLOR : value;
+        var color = Constants.AXIS.HIDDEN_TITLE.COLOR;
+        var enableAccUpdates = this._properties.origin.get('interaction.enableAccUpdates') || false;
+        if(enableAccUpdates){
+            color = ACCStyleUtils.convertColor(Constants.AXIS.HIDDEN_TITLE.ACC_COLOR);
+        }
+        return this._isAllHidden() ? color : value;
     };
 
     AxisTitle.prototype.render = function(selection) {
@@ -35210,9 +35492,17 @@ define('sap/viz/chart/components/axis/sub/AxisTitle',[
                     NameColorUtils.convertColor(colorProps) :
                     styles.color
             });
-            var hiddenStyleColor = effectManager.register({
-                fillColor: Constants.AXIS.HIDDEN_TITLE.COLOR
-            });
+            var enableAccUpdates = this._properties.origin.get('interaction.enableAccUpdates') || false;
+            var hiddenStyleColor = null;
+            if (enableAccUpdates) {
+                hiddenStyleColor = effectManager.register({
+                    fillColor: ACCStyleUtils.convertColor(Constants.AXIS.HIDDEN_TITLE.ACC_COLOR)
+                });
+            } else {
+                hiddenStyleColor = effectManager.register({
+                    fillColor: Constants.AXIS.HIDDEN_TITLE.COLOR
+                });
+            }
 
             var titleText = selection.append("g")
                 .attr("class", className)
@@ -37216,6 +37506,8 @@ define('sap/viz/chart/components/util/BuildLayerUtil',[
     _misc.getStep = function(axisBody, cells, startIdx, getPreferredSizeFn) {
         var isAccEnable = axisBody._properties.origin.get('interaction.enableAccUpdates');
         var isInteractive = !axisBody._properties.origin.get('interaction.noninteractiveMode');
+        var rotateAngle = parseFloat(axisBody._properties.origin.get('categoryAxis.label.angle'));
+        var rad = rotateAngle * Math.PI / 180;
         if (cells.length <= 1) {
             return 1;
         }
@@ -37229,7 +37521,11 @@ define('sap/viz/chart/components/util/BuildLayerUtil',[
             cell = cells[j];
             var isSkip;
             if (isAccEnable && isInteractive){
-                isSkip = cell.cellStart - start0 >= MIN_ELEMENT_SIZE;
+                if(rotateAngle && rotateAngle !== 0 && rotateAngle !== 90){
+                    isSkip = cell.cellStart - start0 >= MIN_ELEMENT_SIZE / Math.sin(rad);
+                }else{
+                    isSkip = cell.cellStart - start0 >= MIN_ELEMENT_SIZE;
+                }
             }else{
                 isSkip = cell.cellStart >= end0;
             }
@@ -39423,6 +39719,97 @@ define('sap/viz/chart/components/axis/ValueAxis',[
     return ValueAxis;
 });
 
+define('sap/viz/chart/components/util/PolygonUtil',[], function() {
+    
+    var polygonUtilObj = {};
+
+    polygonUtilObj.calRotatedRect = function(x, y, width, height, angle) {
+        var rad = angle * Math.PI / 180;
+        var rotateCenterX = x, rotateCenterY = y;
+        var corners = [
+            [x, y], [x + width, y],
+            [x + width, y + height], [x, y + height]
+        ];
+        var result = corners.map(function(point) {
+            var dx = point[0] - rotateCenterX, dy = point[1] - rotateCenterY;
+            return {
+                x: dx * Math.cos(rad) - dy * Math.sin(rad) + rotateCenterX,
+                y: dx * Math.sin(rad) + dy * Math.cos(rad) + rotateCenterY
+            };
+        });
+        return result;
+    };
+    
+    polygonUtilObj.calSkewRect = function(x, y, width, height, angle) {
+        var rad = angle * Math.PI / 180;
+        return [
+            {x: x, y: y}, 
+            {x: x + width, y: y},
+            {x: x + width + height * Math.tan(rad), y: y + height}, 
+            {x: x + height * Math.tan(rad), y: y + height}
+        ];
+    };
+
+    polygonUtilObj.calIntersection = function(line1A, line1B, line2A, line2B) {
+        var d = (line2B.y - line2A.y) * (line1B.x - line1A.x) - (line2B.x - line2A.x) * (line1B.y - line1A.y);
+        
+        if (Math.abs(d) < 1e-10) {
+            return null;
+        }
+        
+        var ua = ((line2B.x - line2A.x) * (line1A.y - line2A.y) - (line2B.y - line2A.y) * (line1A.x - line2A.x)) / d;
+        var ub = ((line1B.x - line1A.x) * (line1A.y - line2A.y) - (line1B.y - line1A.y) * (line1A.x - line2A.x)) / d;
+        
+        if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
+            return null;
+        }
+        
+        return {
+            x: line1A.x + ua * (line1B.x - line1A.x),
+            y: line1A.y + ua * (line1B.y - line1A.y)
+        };
+    };
+
+    polygonUtilObj.isPointInConvexPolygon = function(point, polygon) {
+        for (var i = 0; i < polygon.length; i++) {
+            var pointA = polygon[i];
+            var pointB = polygon[(i + 1) % polygon.length];
+            
+            var edge = { x: pointB.x - pointA.x, y: pointB.y - pointA.y };
+            var toPoint = { x: point.x - pointA.x, y: point.y - pointA.y };
+            
+            var cross = edge.x * toPoint.y - edge.y * toPoint.x;
+            
+            if (cross < 0) {
+                return false;
+            }
+        }
+        return true;
+    };
+    polygonUtilObj.sortPoints = function(points) {
+        if (points.length < 3) {
+            return points;
+        }
+        
+        var center = points.reduce(function(acc, p) {
+            return {
+                x: acc.x + p.x,
+                y: acc.y + p.y
+            };
+        }, { x: 0, y: 0 });
+        center.x /= points.length;
+        center.y /= points.length;
+        
+        var result = points.sort(function(a, b) {
+            var angleA = Math.atan2(a.y - center.y, a.x - center.x);
+            var angleB = Math.atan2(b.y - center.y, b.x - center.x);
+            return angleA - angleB;
+        });
+        return result;
+    };
+
+    return polygonUtilObj;
+});
 define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
     "sap/viz/framework/common/util/Constants",
     "sap/viz/framework/common/util/ArrayUtils",
@@ -39435,6 +39822,7 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
     "sap/viz/framework/common/util/PositionUtil",
     "sap/viz/framework/common/util/RuleUtil",
     "sap/viz/chart/components/util/StyleUtils",
+    "sap/viz/chart/components/util/PolygonUtil",
     "sap/viz/framework/common/util/GeometryUtils",
     "sap/viz/framework/common/util/DataGraphics",
     "sap/viz/framework/common/util/ObjectUtils"
@@ -39450,6 +39838,7 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
     PositionUtils,
     RuleUtil,
     StyleUtils,
+    PolygonUtil,
     GeometryUtils,
     DataGraphics,
     ObjectUtils
@@ -39704,7 +40093,7 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
     };
 
     rendererFunc.prototype.drawLabels = function(selection, layers, bound, position, props, effectManager,
-        needRowAxisOffset, labelOffset, additionalWidth, rebuildUI, isAccEnable, lineSize) {
+        needRowAxisOffset, labelOffset, additionalWidth, rebuildUI, isAccEnable, lineSize, clippathRect) {
         var layersReversed = layers.slice().reverse();
         var layersLength = layersReversed.length;
         var baseline = 0;
@@ -39715,7 +40104,7 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
             this.drawSingleLayerLabels(selection, layersReversed[i], bound,
                 position, props, baseline, i, layersReversed, effectManager,
                 needRowAxisOffset, labelOffset, additionalWidth, rebuildUI,
-                isAccEnable, lineSize);
+                isAccEnable, lineSize, clippathRect);
         }
         //remove labels out of layer limitation
         while(selection.select(".index_"+i).node()){
@@ -39754,21 +40143,43 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
             realXOffset = xOffset - baseYOffset * Math.cos(refAngle * Math.PI/180);
         }
 
-        return "translate(" + realXOffset + "," + realYOffset + ")";
+        return { 
+            offsetX: parseFloat(realXOffset),
+            offsetY: parseFloat(realYOffset)
+        };
     };
 
-    rendererFunc.prototype._setLabelRectSize = function(rectNode, labelSize, textSize, isAccEnable, isVertical) {
-        if(rectNode && labelSize){
-            if(isAccEnable && isVertical){
-                rectNode.setAttribute("width", Math.max(labelSize.width, MIN_ELEMENT_SIZE));
-                rectNode.setAttribute("height", labelSize.height);
-            }else if(isAccEnable && !isVertical){
-                rectNode.setAttribute("width", labelSize.width);
-                rectNode.setAttribute("height", Math.max(labelSize.height, MIN_ELEMENT_SIZE));
-            }else{
-                rectNode.setAttribute("width", labelSize.width);
-                rectNode.setAttribute("height", labelSize.height);
-            }
+    rendererFunc.prototype._setLabelRectSize = function(rectNode, labelSize, textSize, isAccEnable,
+        isVertical, sizeLimit) {
+        if(isAccEnable){
+            var x = parseFloat(rectNode.getAttribute('x'));
+            var y = parseFloat(rectNode.getAttribute('y'));
+            var rectPoints;
+            if(rectNode && labelSize){
+                if(isVertical){
+                    rectPoints = PolygonUtil.calRotatedRect(
+                        1, 
+                        y, 
+                        sizeLimit + TICK_SIZE, 
+                        labelSize.height, 
+                        0);
+                }else{
+                    rectPoints = PolygonUtil.calRotatedRect(
+                        x,
+                        y, 
+                        labelSize.width, 
+                        Math.min(labelSize.height, sizeLimit), 
+                        0);
+                }
+            }
+            rectNode.setAttribute("points", rectPoints.map(function(d) {
+                var pointX = NumberUtils.preciseSimple(d.x);
+                var pointY = NumberUtils.preciseSimple(d.y);
+                return pointX + "," + pointY;
+            }).join(" "));
+        }else{
+            rectNode.setAttribute("width", labelSize.width);
+            rectNode.setAttribute("height", labelSize.height);
         }
     };
 
@@ -39850,10 +40261,12 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
     var MIN_LABEL_CHAR_NUM = 3;
     var ELLIPSIS_NUM = 3;
     var MIN_SPACING = 24;
-    
+
     rendererFunc.prototype.drawSingleLayerLabels = function(selection, layer, bound, position, props,
         baseline, index, layers, effectManager, needRowAxisOffset, labelOffset, additionalWidth, rebuildUI,
-        isAccEnable, lineSize) {
+        isAccEnable, lineSize, clippathRect) {
+        
+        var MARGIN_SIZE = 2;
         var clid = CATEGORY_LABEL_ID;
         var width = bound.width;
         var realWidth = bound.realSize && bound.realSize.width;
@@ -39896,8 +40309,7 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
             }
         }
         offset = layers.length === 1 ? LABEL_OFFSET : TICK_SIZE;
-        this._setLabelParameters(labels, position, baseline, width, height, offset, layer, 
-            isAccEnable);
+        this._setLabelParameters(labels, position, baseline, width, height, offset, layer);
 
         var sizeLimitForFirstLabel = false;
         if(keepFirstAndLastLabel){
@@ -40009,12 +40421,14 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
             config.styles = propStyle;
             
             this.setAttribute(clid, d.id);
+            var labelX = d.x;
+            var labelY = d.y;
             if(isAccEnable){
                 if(isVertical){
-                    var labelX = d.x - lineSizeOffset;
+                    labelX = d.x - lineSizeOffset;
                     this.setAttribute("transform", "translate(" + labelX + "," + d.y + ")");
                 }else{
-                    var labelY = d.y + lineSizeOffset;
+                    labelY = d.y + lineSizeOffset;
                     this.setAttribute("transform", "translate(" + d.x + "," + labelY + ")");
                 }
             }else{
@@ -40076,7 +40490,11 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
                 //the axis can display the label text. we draw the rect.
                 rect = this.querySelector("." + AXIS_CLASS_NAMES.BACKGROUND_RECT);
                 if (!rect) {
-                    rect = SVG.create("rect");
+                    if(isAccEnable){
+                        rect = SVG.create("polygon");
+                    }else{
+                        rect = SVG.create("rect");
+                    }
                     rect.setAttribute("class", AXIS_CLASS_NAMES.BACKGROUND_RECT);
                     rect.setAttribute("fill", "transparent");
                     this.appendChild(rect);
@@ -40152,35 +40570,110 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
                     width: forceLabelRotation && rotated ? d.rectHeight :d.rectWidth,
                     height: forceLabelRotation && rotated ? d.rectWidth: d.rectHeight
                 };
-                me._setLabelRectSize(rect, labelSize, textNodeSize, isAccEnable, isVertical);
-                var textSize, textHeight, textWidth;
+                me._setLabelRectSize(rect, labelSize, textNodeSize, isAccEnable, isVertical,
+                    sizeLimit + 2 * MARGIN_SIZE);
+                var textSize, textHeight, textWidth, rectHeight, rectOffset, refRectWidth;
 
                 if(layer.rotated && layer.rotationAngle !== VERTICAL_ANGLE && layer.rotationAngle !== 0) {
-                    if(d.isEventRectLimited) {
+                    if(isAccEnable){
+                        var clippathPoints = PolygonUtil.calRotatedRect(
+                            clippathRect.x - bound.offset.x,
+                            clippathRect.y,
+                            clippathRect.width,
+                            clippathRect.height,
+                            clippathRect.angle
+                        );
                         textSize = TextUtils.canvasMeasure(d.text, fontSize, fontWeight, fontFamily);
                         textHeight = NumberUtils.preciseSimple(textSize.height);
                         textWidth = NumberUtils.preciseSimple(textSize.width);
 
-                        var rectHeight = Math.min(sizeLimit, textWidth);
+                        rectHeight = Math.min(sizeLimit, textWidth);
+                        var rectWidth = Math.max(NumberUtils.preciseSimple(textHeight) + 2 * MARGIN_SIZE, 
+                        MIN_ELEMENT_SIZE);
+                        var rectPoints;
+                        var intersections = [];
+                        var innerPoints = [];
+                        if(d.isEventRectLimited) {
+                            rectOffset = rectWidth/4 * Math.sin(config.rotationAngle * Math.PI/180);
+
+                            //enlarge rect size to add margin
+                            var rectTranslate = addRectMargin(rect, config.rotationAngle, -rectOffset, TICK_SIZE);
+                            rectPoints = PolygonUtil.calRotatedRect(
+                                parseFloat(d.rectX + rectTranslate.offsetX + labelX), 
+                                parseFloat(d.rectY + rectTranslate.offsetY), 
+                                parseFloat(rectWidth),
+                                parseFloat(rectHeight) + 2 * MARGIN_SIZE, 
+                                parseFloat(90 - config.rotationAngle)
+                            );
+                        } else {
+                            refRectWidth = d.contentWidth * 3;
+                            if(refRectWidth < d.cellWidth) {
+                                rect.setAttribute("width", refRectWidth);
+                                rect.setAttribute("x", d.rectX + d.cellWidth/2 - refRectWidth/2);
+                            }
+                            rectPoints = PolygonUtil.calSkewRect(
+                                parseFloat(d.rectX + labelX + d.cellWidth/2 - refRectWidth/2), 
+                                parseFloat(d.rectY), 
+                                parseFloat(refRectWidth), 
+                                parseFloat(labelSize.height), 
+                                parseFloat(config.rotationAngle - 90)
+                            );
+                        }
+                        for (var j = 0; j < 4; j++) {
+                            var line1A = rectPoints[j], line1B = rectPoints[(j + 1) % 4];
+                            for (var k = 0; k < 4; k++) {
+                                var line2A = clippathPoints[k], line2B = clippathPoints[(k + 1) % 4];
+                                var pt = PolygonUtil.calIntersection(line1A, line1B, line2A, line2B);
+                                if (pt) {
+                                    intersections.push(pt);
+                                }
+                            }
+                        }
+                        rectPoints.forEach(function(pt) { 
+                            if (PolygonUtil.isPointInConvexPolygon(pt, clippathPoints)) {
+                                innerPoints.push(pt); 
+                            }
+                        });
+                        clippathPoints.forEach(function(pt) { 
+                            if (PolygonUtil.isPointInConvexPolygon(pt, rectPoints)) {
+                                innerPoints.push(pt); 
+                            }
+                        });
+                        var allPoints = intersections.concat(innerPoints);
+                        var sortedPoints = PolygonUtil.sortPoints(allPoints);
+                        rect.setAttribute("points", sortedPoints.map(function(d) {
+                            var pointX = NumberUtils.preciseSimple(d.x);
+                            var pointY = NumberUtils.preciseSimple(d.y);
+                            return pointX - labelX + "," + pointY;
+                        }).join(" "));
+                    }else{
+                        if(d.isEventRectLimited) {
+                            textSize = TextUtils.canvasMeasure(d.text, fontSize, fontWeight, fontFamily);
+                            textHeight = NumberUtils.preciseSimple(textSize.height);
+                            textWidth = NumberUtils.preciseSimple(textSize.width);
+
+                            rectHeight = Math.min(sizeLimit, textWidth);
 
-                        rect.setAttribute("width", textHeight);
-                        rect.setAttribute("height", rectHeight);
+                            rect.setAttribute("width", textHeight);
+                            rect.setAttribute("height", rectHeight);
 
-                        var rectOffset = textHeight/4 * Math.sin(config.rotationAngle * Math.PI/180);
+                            rectOffset = textHeight/4 * Math.sin(config.rotationAngle * Math.PI/180);
 
-                        //enlarge rect size to add margin
-                        var translateStr = addRectMargin(rect, config.rotationAngle, -rectOffset, TICK_SIZE);
-                        var rotateStr = "rotate(" + (90 - config.rotationAngle) + "," +
-                            d.rectX + "," + d.rectY + ") ";
+                            //enlarge rect size to add margin
+                            var realOffset = addRectMargin(rect, config.rotationAngle, -rectOffset, TICK_SIZE);
+                            var translateStr = "translate(" + realOffset.offsetX + "," + realOffset.offsetY + ")";
+                            var rotateStr = "rotate(" + (90 - config.rotationAngle) + "," +
+                                d.rectX + "," + d.rectY + ") ";
 
-                        rect.setAttribute("transform", translateStr + ' ' + rotateStr);
-                    } else {
-                        rect.setAttribute("transform", "skewX(-" + (90-layer.rotationAngle) + ")");
+                            rect.setAttribute("transform", translateStr + ' ' + rotateStr);
+                        } else {
+                            rect.setAttribute("transform", "skewX(-" + (90-layer.rotationAngle) + ")");
 
-                        var refRectWidth = d.contentWidth * 3;
-                        if(refRectWidth < d.cellWidth) {
-                            rect.setAttribute("width", refRectWidth);
-                            rect.setAttribute("x", d.rectX + d.cellWidth/2 - refRectWidth/2);
+                            refRectWidth = d.contentWidth * 3;
+                            if(refRectWidth < d.cellWidth) {
+                                rect.setAttribute("width", refRectWidth);
+                                rect.setAttribute("x", d.rectX + d.cellWidth/2 - refRectWidth/2);
+                            }
                         }
                     }
                 }else {
@@ -40232,7 +40725,7 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
     }
 
     rendererFunc.prototype._setLabelParameters = function(labels, position, baseline, width, height, textOffset,
-        layer, isAccEnable) {
+        layer) {
         var i = 0,
             length = labels.length,
             label;
@@ -40388,6 +40881,7 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
         this._hasNegativeValue = false;
         this._styleChanged = true;
         this._localeChanged = true;
+        this._additionalWidth = 0;
         //Default offset for trellis axis label is 5.
         this._labelOffset = 5;
         var styleChangeCallBack = function() {
@@ -40509,19 +41003,32 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
             additionalWidth = this.getAdditionalWidth();
         }
         var rect = this._selection.select('.v-clippath rect');
-        rect.attr('width', this._size.width + 2 + additionalWidth).attr('x', -1 - additionalWidth);        
+        rect.attr('width', this._size.width + 2 + additionalWidth).attr('x', -1 - additionalWidth);
     };
 
     OrdinalCommonAxisBody.prototype._update = function(rebuildUI) {
+        var isAccEnable = this._properties.origin.get('interaction.enableAccUpdates');
         if(!this._tickGroupNode && !this._labelGroupNode){
             return;
         }
         var properties = this._properties.get();
+        var rect, clippathRect;
         if (this._data && properties.visible) {
             var width = this._size.width;
             var height = this._size.height;
             var position = this._position;
-
+            if(isAccEnable){
+                rect = this._selection.select('.v-clippath rect');
+                rect.attr('width', this._size.width + 2 + this._additionalWidth)
+                    .attr('x', -1 - this._additionalWidth);       
+                clippathRect = {
+                    width: this._size.width + 2 + this._additionalWidth,
+                    height: this._size.height + 2,
+                    x: -1 - this._additionalWidth,
+                    y: -1,
+                    angle: 0
+                };
+            }
             if(rebuildUI){
                 this._layers = this._buildLayers(this._data);
                 this.layout();
@@ -40546,7 +41053,7 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
                         position, properties, this.runtime().effectManager(), this._froce);
                 }
                 if (properties.label && properties.label.visible) {
-                    this._renderLabels(properties, layers, bound, position, rebuildUI);
+                    this._renderLabels(properties, layers, bound, position, rebuildUI, clippathRect);
                 }
             }
         }
@@ -40567,16 +41074,37 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
 
     OrdinalCommonAxisBody.prototype.render = function(selection) {
         this._selection = selection;
+        var isAccEnable = this._properties.origin.get('interaction.enableAccUpdates');
         selection.select("g." + AXIS_CLASS_NAMES.LINE_GROUP).remove();
         selection.select("g." + AXIS_CLASS_NAMES.TICK_GROUP).remove();
         selection.select("g." + AXIS_CLASS_NAMES.LABEL_GROUP).remove();
-
-        var additionalWidth = 0;
-        if(this._needExtened() && this._otherSize) {
-            additionalWidth = this.getAdditionalWidth();
+        var clippathid;
+        var clippathRect;
+        if(isAccEnable) {
+            var lineSize = this._properties.get('axisLine.size');
+            if(this._needExtened() && this._otherSize) {
+                this._additionalWidth = this.getAdditionalWidth();
+            }
+            clippathRect = {
+                width: this._size.width + 2 + this._additionalWidth,
+                height: this._size.height + 2 + lineSize / 2,
+                x: -1 - this._additionalWidth,
+                y: -1,
+                angle: 0
+            };
+            clippathid = ClippathUtil.drawClippath(d3.select(selection.node()),
+                clippathRect.width, clippathRect.height,
+                clippathRect.x, clippathRect.y);
+        } else {
+            var additionalWidth = 0;
+            if(this._needExtened() && this._otherSize) {
+                additionalWidth = this.getAdditionalWidth();
+            }
+            clippathid = ClippathUtil.drawClippath(d3.select(selection.node()),
+                this._size.width + 2 + additionalWidth, this._size.height + 2,
+                -1 - additionalWidth, -1);
         }
-        var clippathid = ClippathUtil.drawClippath(d3.select(selection.node()),
-            this._size.width + 2 + additionalWidth, this._size.height + 2, -1 - additionalWidth, -1);
+        
         selection.attr('clip-path', 'url(#' + clippathid + ')');
         var properties = this._properties.get();
 
@@ -40608,7 +41136,7 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
 
                 if (properties.label && properties.label.visible) {
                     this._labelGroupNode = selection.append("g").attr("class", AXIS_CLASS_NAMES.LABEL_GROUP);
-                    this._renderLabels(properties, layers, bound, position);
+                    this._renderLabels(properties, layers, bound, position, undefined, clippathRect);
                 }
             }
         }
@@ -40618,7 +41146,8 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
         }
     };
     
-    OrdinalCommonAxisBody.prototype._renderLabels = function(properties, layers, bound, position, rebuildUI) {
+    OrdinalCommonAxisBody.prototype._renderLabels = function(properties, layers, bound, position,
+        rebuildUI, clippathRect) {
         var envManager = this.runtime().envManager();
         if (envManager) {
             properties.textAnchor = envManager.textAnchor();
@@ -40630,7 +41159,7 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
         this._bodyRenderer.drawLabels(this._labelGroupNode, layers, bound, position,
             properties, this.runtime().effectManager(), this._needRowAxisOffset(), this._labelOffset, 
             this._needExtened() ? this.getAdditionalWidth(): 0, rebuildUI, isAccEnable && isInteractive, 
-            lineSize);
+            lineSize, clippathRect);
         
         if(this._bodyRenderer && this._bodyRenderer.applyLabelStyle){
             this._bodyRenderer.applyLabelStyle(this._labelGroupNode);
@@ -40803,9 +41332,6 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
     };
 
     OrdinalCommonAxisBody.prototype._getMaxLayersSize = function(spacings, sizeLimit) {
-        var lineSize = this._properties.get('axisLine.size');
-        var isAccEnable = this._properties.origin.get('interaction.enableAccUpdates');
-        var isInteractive = !this._properties.origin.get('interaction.noninteractiveMode');
         var sum = 0;
         for (var i = 0, length = spacings.length; i < length; ++i) {
             if (typeof sizeLimit !== 'number' || sum + spacings[i].interval <= sizeLimit) {
@@ -40818,9 +41344,6 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
                 break;
             }
         }
-        if(isAccEnable && isInteractive){
-            sum += lineSize / 2;
-        }
         return sum;
     };
 
@@ -41968,7 +42491,8 @@ define('sap/viz/chart/components/datalabels/DataLabels',[
     'sap/viz/framework/common/util/ObjectUtils',
     'sap/viz/framework/common/util/FiscalUtil',
     "sap/viz/framework/common/util/GeometryUtils",
-    "sap/viz/framework/common/lang/LangManager"
+    "sap/viz/framework/common/lang/LangManager",
+    "sap/viz/framework/common/util/ACCStyleUtils"
 ], function (oo,
     TimeUtil,
     TypeUtils,
@@ -41986,7 +42510,8 @@ define('sap/viz/chart/components/datalabels/DataLabels',[
     ObjectUtils,
     FiscalUtil,
     GeometryUtils,
-    langManager) {
+    langManager,
+    ACCStyleUtils) {
 
     function defaultRenderer(config) {
         var text = SVG.create("text");
@@ -42386,6 +42911,8 @@ define('sap/viz/chart/components/datalabels/DataLabels',[
     };
 
     DataLabels.prototype._setDataLabelColor = function(item, range, backgroundColor, color, referColor) {
+        var enableAccUpdates = this._properties.origin.get('interaction.enableAccUpdates') || false;
+        var outOfDataPoint, backColor, fill, textColor;
         if(!color || range === 'outside'){
             //dataLabelColor may need to be calculated.
             //check if dataLabel "covers" dataPoint.
@@ -42399,20 +42926,59 @@ define('sap/viz/chart/components/datalabels/DataLabels',[
                 backColor = (outOfDataPoint ? backgroundColor : referColor) || "#000000";
             }
             if(backColor){
-                color = ColorUtil.getDataLabelColor(backColor);
-                var fill = this.runtime().effectManager().register({
-                    fillColor: color
-                });
+                fill = null;
+                if (!item.fillName) {
+                    item.fillName = ACCStyleUtils.getNameByColor(backColor);
+                }
+                if (enableAccUpdates && !outOfDataPoint) {
+                    textColor = ACCStyleUtils.getTextColor(item.fillName);
+                    fill = textColor;
+                    DataLabels.prototype._setTextShadow(item, item.fillName);
+                } else {
+                    color = ColorUtil.getDataLabelColor(backColor);
+                    fill = this.runtime().effectManager().register({
+                        fillColor: color
+                    });
+                }
                 item.node.setAttribute("fill", fill);
             }
+        } else if (color && enableAccUpdates) {
+            // only areaDataLabels need to check if the data label is out of the data point
+            if (this.constructor.name === 'AreaDataLabels') {
+            // use this maybe is AreaDataLabels, not DataLabels.
+            // AreaDataLabels.isDataLabelOutOfDataPoint return false
+            // so we need to check if the data label is out of the data point.
+                var selfProto = DataLabels.prototype;
+                outOfDataPoint = selfProto.isDataLabelOutOfDataPoint(item.node, item);
+                if (outOfDataPoint) {
+                    fill = item.fillName ? item.fillName : referColor;
+                    textColor = ACCStyleUtils.getTextColor(fill);
+                    if (textColor) {
+                        item.node.setAttribute("fill", textColor);
+                    }
+                }
+                selfProto._setTextShadow(item, fill);
+            }
+        }
+    };
+
+    DataLabels.prototype._setTextShadow = function(item, fill) {
+        var textShadow = ACCStyleUtils.getTextShadowStyle(fill);
+        if (textShadow) {
+            item.node.firstChild.setAttribute("style", 'text-shadow: ' + textShadow + ';');
         }
     };
 
     DataLabels.prototype.updateColor = function(dataLabelInfos, backgroundColor) {
         var dataLabelColor = this._properties.get('style.color');
         var range = this._properties.get("style.colorRange");
+        var rules = this._properties.origin.get('plotArea.dataPointStyle') &&
+        this._properties.origin.get('plotArea.dataPointStyle').rules || [];
         for (var iG = 0; iG < dataLabelInfos.length; iG++) {
             var item = dataLabelInfos[iG];
+            if (rules.length === item.length) {
+                item.fillName = rules[iG].properties && rules[iG].properties.color;
+            }
             if (item.node) {
                 this._setDataLabelColor(item, range, backgroundColor, dataLabelColor, item.referColor);
             }
@@ -48197,7 +48763,8 @@ define('sap/viz/chart/components/plots/BasePlot',[
     "sap/viz/framework/interaction/utils/PlotZoomUtils",
     "sap/viz/chart/components/util/ZoomUtil",
     "sap/viz/chart/components/util/ColorUtil",
-    'sap/viz/framework/common/util/TimeUtil'
+    'sap/viz/framework/common/util/TimeUtil',
+    'sap/viz/framework/common/util/ACCStyleUtils'
 ], function Setup(
     oo,
     ObjectUtils,
@@ -48222,7 +48789,8 @@ define('sap/viz/chart/components/plots/BasePlot',[
     PlotZoomUtils,
     ZoomUtil,
     ColorUtil,
-    TimeUtil
+    TimeUtil,
+    ACCStyleUtils
 ) {
     var CSSCLASS = Constants.CSS.CLASS;
 
@@ -49233,11 +49801,33 @@ define('sap/viz/chart/components/plots/BasePlot',[
                 config.matchSemantic = true;
             }
 
-            if (result.properties.stroke) {
-                config.graphic.stroke = result.properties.stroke;
+            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.strokeWidth) {
-                config.graphic.strokeWidth = result.properties.strokeWidth;
+            var enableAccUpdates = this._properties.origin.get('interaction.enableAccUpdates') || false;
+
+            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;
+                }
             }
         }
 
@@ -49245,6 +49835,23 @@ define('sap/viz/chart/components/plots/BasePlot',[
         return config;
     };
 
+    BasePlot.prototype._checkColorContrast = function (config, theme) {
+        if (!config.graphic.fill) {
+            return;
+        }
+        var textVisible = this._properties.get("dataLabel.visible");
+        var chartType = this._runtime._semanticMgr._chartType;
+        var threshold = ACCStyleUtils.getThreshold(theme, chartType, textVisible);
+        var backgroundColor = this._getBackgroundColor();
+        var fillColor = config.graphic.fill;
+
+        if (backgroundColor && fillColor) {
+            var ratioObj = ColorUtil.checkColorContrast(backgroundColor, fillColor, threshold);
+            return ratioObj.meetsThreshold;
+        }
+        return false;
+    };
+
     BasePlot.prototype._getColor = function(data) {
         var color = null;
         if (this._data.color2 && data.color2) {
@@ -52818,6 +53425,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForBar',[
             "supportedChartTypes": barType2
         },
         "handler": function(event, service) {
+            var isAccEnable = service.getProperties().get("interaction.enableAccUpdates");
             service.fireEvent(event, true);
             service._getDecorationLayer().clear();
             var gray = event.data.isGray;
@@ -55323,7 +55931,7 @@ define('sap/viz/chart/components/plots/StackedColumnPlot',[
                 config = configs[i];
                 position = positions[i];
                 if (i === 0) {
-                    x0 = position.x;
+                    x0 = position.x; 
                     y0 = position.y;
                     x1 = x0 + config.graphic.width;
                     y1 = y0 + config.graphic.height;
@@ -55420,11 +56028,7 @@ define('sap/viz/chart/components/plots/StackedColumnPlot',[
                     if (cpRenderer.update) {
                         if (config.graphic.pattern === "noFill") {
                             config.path = this._generatePath(config.graphic, cfg);
-                            if (config.isZero) {
-                                config.graphic.pathStrokeWidth = 0;
-                            } else {
-                                config.graphic.pathStrokeWidth = 3;
-                            }
+                            config.graphic.pathStrokeWidth = config.isZero ? 0 : 3;
                         }
                         cpRenderer.update(dataPointG, config);
                     }
@@ -55435,11 +56039,7 @@ define('sap/viz/chart/components/plots/StackedColumnPlot',[
                 } else {
                     if (config.graphic.pattern === "noFill") {
                         config.path = this._generatePath(config.graphic, cfg);
-                        if (config.isZero) {
-                            config.graphic.pathStrokeWidth = 0;
-                        } else {
-                            config.graphic.pathStrokeWidth = 3;
-                        }
+                        config.graphic.pathStrokeWidth = config.isZero ? 0 : 3;
                         clonedGraphic = ObjectUtils.clone(config.graphic);
                         delete clonedGraphic.bgColor;
                         delete clonedGraphic.drawingEffect;
@@ -55448,7 +56048,7 @@ define('sap/viz/chart/components/plots/StackedColumnPlot',[
                     }
                     node = cpRenderer(config);
                     if (clonedGraphic) {
-                        shadowNode = cpRenderer({graphic: clonedGraphic});
+                        shadowNode = cpRenderer({ graphic: clonedGraphic });
                     }
 
                     dataPointG = SVG.create("g");
@@ -75623,6 +76223,11 @@ define('sap/viz/chart/components/plots/PiePlot',[
 
     oo.extend(PiePlot, BasePlot);
 
+    PiePlot.prototype._buildWrapperConfig = function (data, position, context, option) {
+        option = option || {};
+        return PiePlot.superclass._buildWrapperConfig.call(this, data, position, context, option);
+    };
+
     PiePlot.prototype.destroy = function() {
         PiePlot.superclass.destroy.call(this);
         this._dataPointRenderer = null;
@@ -76523,13 +77128,15 @@ define('sap/viz/chart/components/renderers/TreeMapDimensionLabelRenderer',["sap/
     'sap/viz/chart/components/util/TextUtils',
     'sap/viz/chart/components/util/ColorUtil',
     "sap/viz/framework/common/util/NameColorUtils",
-    'sap/viz/framework/common/util/Constants'
+    'sap/viz/framework/common/util/Constants',
+    'sap/viz/framework/common/util/ACCStyleUtils'
 ], function(SVG,
     DataGraphics,
     TextUtils,
     ColorUtil,
     NameColorUtils,
-    Constants) {
+    Constants,
+    ACCStyleUtils) {
     var textLength = function(config) {
         var data = config.data;
         var labelStyle = config.styles;
@@ -76703,6 +77310,7 @@ define('sap/viz/chart/components/renderers/TreeMapDimensionLabelRenderer',["sap/
         var color, fill;
         var d = config.data;
         var bgColor = NameColorUtils.convertColor(d.color) || '0x000000';
+        var enableAcc = config.enableAcc;
         var props = config.props;
         if (props.dimensionLabel.style.color) {
             color = props.dimensionLabel.style.color;
@@ -76710,12 +77318,16 @@ define('sap/viz/chart/components/renderers/TreeMapDimensionLabelRenderer',["sap/
             if (config.isLeafItem) {
                 if (props.dataLabel.visible && props.dataLabel.style.color) {
                     if(props.dataLabel.style.colorRange === 'outside'){
-                        color = ColorUtil.getDataLabelColor(bgColor);
+                        color = enableAcc ? ACCStyleUtils.getTextColor(bgColor) 
+                        :
+                        ColorUtil.getDataLabelColor(bgColor);
                     }else{
                         color = props.dataLabel.style.color;
                     }
                 } else {
-                    color = ColorUtil.getDataLabelColor(bgColor);
+                    color = enableAcc ? ACCStyleUtils.getTextColor(bgColor) 
+                    :
+                    ColorUtil.getDataLabelColor(bgColor);
                 }
             } else {
                 color = textColor(config);
@@ -76724,10 +77336,17 @@ define('sap/viz/chart/components/renderers/TreeMapDimensionLabelRenderer',["sap/
         return color;
     };
 
+    var getTextShadow = function(config) {
+        var d = config.data;
+        var bgColor = NameColorUtils.convertColor(d.color) || '0x000000';
+        return ACCStyleUtils.getTextShadowStyle(bgColor);
+    };
+
     var treeMapDimensionLabelRenderer = function(config) {
         var label = SVG.create("text");
         var labelStyle = config.styles;
         var fill = labelStyle.color ? labelStyle.color : getLabelColor(config);
+        var textShadow = labelStyle.textShadow ? labelStyle.textShadow : getTextShadow(config);
         label.setAttribute("fill", fill);
         label.setAttribute("font-size", labelStyle.fontSize);
         label.setAttribute("stroke", "none");
@@ -76736,6 +77355,9 @@ 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) {
+            label.setAttribute('style', "text-shadow:" + textShadow + ";");
+        }
         label.value = config.data.label;
         label.textContent = getText(config);
         locateLabels(label, config);
@@ -78109,12 +78731,15 @@ define('sap/viz/chart/components/plots/treemap/TreeMapPlot',[
                     var fontFamily =  LABEL_STYLE["fontFamily"];
                     var fontStyle = LABEL_STYLE["fontStyle"];
                     var fontColor = LABEL_STYLE["color"];
+                    var textShadow = LABEL_STYLE["textShadow"];
+                    var enableAcc = _self._properties.origin.get('interaction.enableAccUpdates');
                     var styles = {
                         fontSize : fontSize,
                         fontWeight : fontWeight,
                         fontFamily : fontFamily,
                         fontStyle : fontStyle,
-                        color: fontColor
+                        color: fontColor,
+                        textShadow: textShadow
                     };
                     var context = {
                         ctx: ctx.ctx,
@@ -78125,7 +78750,8 @@ define('sap/viz/chart/components/plots/treemap/TreeMapPlot',[
                         isLeafItem: isLeafItem,
                         textAnchor: textAnchor,
                         borderWidth: _self._borderWidth,
-                        padding: padding
+                        padding: padding,
+                        enableAcc: enableAcc
                     };
                     var label = dimensionLabelRenderer(context, TreeMapDimensionLabelRenderer.expose);
                     if(label) {
@@ -78792,6 +79418,9 @@ define(
         };
 
         MBCLegend.prototype.render = function (selection, needRender) {
+            
+            var isAccEnable = this._properties.origin.get('interaction.enableAccUpdates');
+            var isInteractive = !this._properties.origin.get('interaction.noninteractiveMode');
             if(this.isInSemanticMode()){
                 selection.selectAll('g.v-mbc-content').remove();
                 ColorLegend.prototype.render.apply(this, arguments);
@@ -79059,6 +79688,19 @@ define(
                 }
 
                 var infos = calMarkerAndTextInfo(labelsData);
+                var isMinimumSizeInHorizontal = (that._orientation === 'top' || 
+                    that._orientation === 'bottom') && 
+                    that._mbcLA_markerSize.width < 25;
+                var isMinimumSizeInVertical = (that._orientation === 'left' || 
+                    that._orientation === 'right') && 
+                    that._mbcLA_markerSize.height < 25;
+                if (isAccEnable && isInteractive){
+                    if (isMinimumSizeInHorizontal || isMinimumSizeInVertical
+                    ) {
+                        selection.selectAll('g.v-content').remove();
+                        return this;
+                    }
+                }
                 var makerWrapper = wrap.selectAll('rect.v-marker').data(infos.marker);
                 makerWrapper.exit().remove();
                 makerWrapper.enter().append('rect');
@@ -79505,7 +80147,6 @@ define(
                     }
                 }
             }
-
             if (this._orientation === 'top' || this._orientation === 'bottom') {
                 this._mbcLA_markerSize.width = h;
                 this._mbcLA_markerSize.height = H_MARKERSIZE.height;
@@ -80880,6 +81521,7 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
     "sap/viz/framework/common/util/UADetector",
     'sap/viz/framework/common/util/DataUtils',
     "sap/viz/chart/components/util/ColorUtil",
+    "sap/viz/framework/common/util/ACCStyleUtils",
     "sap/viz/chart/components/accessibility/ChartComponentNavigatorFactory",
     "sap/viz/chart/components/accessibility/HeatMapDataPointNavigator",
     "sap/viz/chart/components/util/ChartConstants",
@@ -80901,6 +81543,7 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
         UADetector,
         DataUtils,
         ColorUtil,
+        ACCStyleUtils,
         ChartNavigator,
         DataPointNavigator,
         ChartConstants) {
@@ -81157,7 +81800,8 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
             dataLabelColor: this._properties.get("dataLabel.style.color"),
             ellipsisText: this._ellipsisText,
             ellipsisOptions: ellipsisOptions,
-            colorRange : this._properties.get("dataLabel.style.colorRange")
+            colorRange : this._properties.get("dataLabel.style.colorRange"),
+            enableAccUpdates: this._properties.origin.get('interaction.enableAccUpdates') || false
         };
 
 
@@ -81224,6 +81868,14 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
         if (!fontColor) {
             fontColor = ColorUtil.getDataLabelColor(context.background);
         }
+
+        var enableAccUpdates = context.enableAccUpdates;
+        var textShadow = null;
+        if (enableAccUpdates) {
+            var referColor = context.referColor || context.background;
+            fontColor = ACCStyleUtils.getTextColor(referColor);
+            textShadow = ACCStyleUtils.getTextShadowStyle(referColor);
+        }
         
         fontSize = TextUtils.validateFontStyle(fontSize);
         fontWeight = TextUtils.validateFontStyle(fontWeight);
@@ -81240,6 +81892,9 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
             styleStr += "font-family:" + fontFamily + ";";
             styleStr += "font-style:" + fontStyle + ";";
             styleStr += "fill:" + fontColor + ";";
+            if (textShadow) {
+                styleStr += "text-shadow: " + textShadow + ";";
+            }
 
             //set dimension label text in ellipsis mode if it is too long
             var textContent = null;
@@ -81274,13 +81929,15 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
                 }
             }
 
-
-            d3.select(textNode)
+            var selection = d3.select(textNode)
                 .attr("font-size", fontSize)
                 .attr("font-weight", fontWeight)
                 .attr("font-family", fontFamily)
                 .attr("font-style", fontStyle)
                 .attr("fill", fontColor);
+            if (textShadow) {
+                selection.style("text-shadow", textShadow);
+            }
         }
         return textNode;
     }