axidio-styleguide-library1-v2 0.1.25 → 0.1.26

package/fesm2022/axidio-styleguide-library1-v2.mjs

@@ -7120,10 +7120,10 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         this.uniqueId = this.getUniqueId();
         this.isTransparentBackground = false;
         this.defaultConfiguration = {
-            margin: { top: 20, right: 20, bottom: 20, left: 40 },
-            svgHeight: 70,
+            margin: { top: 30, right: 30, bottom: 50, left: 60 },
+            svgHeight: 80,
             legendHeight: '10%',
-            numberOfYTicks: 5,
+            numberOfYTicks: 7,
             labelFormatter: ChartHelper.defaultFormatter,
             xAxisLabelFomatter: ChartHelper.defaultFormatter,
             yAxisLabelFomatter: ChartHelper.defaultFormatter,
@@ -7199,27 +7199,6 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         var tempObjectHolder = {};
         var rightSvgWidth = 60;
         var leftAndRightSpaces = 50;
-        let isria = this.customChartConfiguration.isRia;
-        // Responsive breakpoints
-        const isMobile = window.innerWidth < 576;
-        const isTablet = window.innerWidth >= 576 && window.innerWidth < 992;
-        const isDesktop = window.innerWidth >= 992;
-        // Adjust margins and font sizes based on device
-        if (isMobile) {
-            this.chartConfiguration.margin = { top: 20, right: 10, bottom: 40, left: 30 };
-            this.chartConfiguration.numberOfYTicks = 4;
-            this.chartConfiguration.svgHeight = 60;
-        }
-        else if (isTablet) {
-            this.chartConfiguration.margin = { top: 25, right: 20, bottom: 45, left: 40 };
-            this.chartConfiguration.numberOfYTicks = 6;
-            this.chartConfiguration.svgHeight = 70;
-        }
-        else {
-            this.chartConfiguration.margin = { top: 30, right: 30, bottom: 50, left: 60 };
-            this.chartConfiguration.numberOfYTicks = 7;
-            this.chartConfiguration.svgHeight = 80;
-        }
         for (var i in this.defaultConfiguration) {
             this.chartConfiguration[i] = ChartHelper.getValueByConfigurationType(i, this.defaultConfiguration, this.customChartConfiguration);
         }
@@ -7251,30 +7230,40 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             }
         }
         var margin = this.chartConfiguration.margin;
-        // Responsive width and height
-        var containerWidth = chartContainer.node().getBoundingClientRect().width;
-        var containerHeight = verticalstackedcontainer.node().getBoundingClientRect().height;
-        var width = containerWidth - margin.left - margin.right;
-        var height = containerHeight * (self.chartConfiguration.svgHeight / 100) - margin.top - margin.bottom;
-        // Adjust width for large datasets and zoom
+        var width = parseInt(chartContainer.style('width')) - margin.left - margin.right;
+        // if (this.chartData.data.length > 8 && this.isZoomedOut) {
+        //   width = this.chartData.data.length * 175;
+        // }
         if (this.chartData.data.length > 30 && this.isZoomedOut) {
-            width = width > this.chartData.data.length * (isMobile ? 15 : 25)
-                ? width
-                : this.chartData.data.length * (isMobile ? 15 : 25);
+            width =
+                width > this.chartData.data.length * 25
+                    ? width
+                    : this.chartData.data.length * 25;
         }
         if (this.chartData.data.length > 8 && !this.isZoomedOut) {
-            width = this.chartData.data.length * (isMobile ? 60 : 130);
+            width = this.chartData.data.length * 130;
         }
-        // Fullscreen and drilldown adjustments
-        if (this.chartConfiguration.isFullScreen != undefined && this.chartConfiguration.isFullScreen) {
-            height = this.chartConfiguration.svgHeight != 80
-                ? this.chartConfiguration.svgHeight
-                : containerHeight;
+        var height = parseInt(verticalstackedcontainer.style('height')) *
+            (self.chartConfiguration.svgHeight / 100) -
+            margin.top -
+            margin.bottom;
+        /**
+         * entire height used in weekly charts as x axis needed to be displayed at the bottom of the chart
+         */
+        if (this.chartConfiguration.isFullScreen != undefined &&
+            this.chartConfiguration.isFullScreen) {
+            height =
+                this.chartConfiguration.svgHeight != 80
+                    ? this.chartConfiguration.svgHeight
+                    : parseInt(verticalstackedcontainer.style('height'));
         }
         if (this.chartConfiguration.isDrilldownChart) {
-            height = containerHeight - margin.top - margin.bottom - (isMobile ? 60 : 130);
+            height =
+                parseInt(verticalstackedcontainer.style('height')) -
+                    margin.top -
+                    margin.bottom -
+                    130;
         }
-        // ...existing code...
         /**
          * for hiding header
          * used by weekly charts
@@ -7313,17 +7302,16 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('height', height)
             .style('overflow-x', 'hidden')
             .style('padding-left', `${margin.left}px`)
-            .style('margin-left', '10px')
             .style('padding-right', `${rightSvgWidth}px`);
         var svgYAxisLeft = outerContainer
             .append('svg')
-            .attr('width', '80')
+            .attr('width', '75')
             .attr('height', height + margin.top + margin.bottom)
             .style('position', 'absolute')
             .style('left', '0')
             .style('z-index', 1)
             .append('g')
-            .attr('transform', 'translate(' + (margin.left + 10) + ',' + margin.top + ')');
+            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
         var svgYAxisRight = outerContainer
             .append('svg')
             .attr('width', rightSvgWidth)
@@ -7338,27 +7326,12 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .attr('class', 'inner-container')
             .style('width', '100%')
             .style('overflow-x', 'auto');
-        // Calculate bar width and padding for mobile to avoid overlap and add space between bars
-        let barWidth;
-        let barPadding = 12; // px, space between bars on mobile
-        let requiredSvgWidth;
-        if (isMobile) {
-            // Use a minimum width per bar and add padding between bars
-            const minBarWidth = 32; // px, can adjust as needed
-            barWidth = minBarWidth;
-            requiredSvgWidth = Math.max(width - rightSvgWidth, (barWidth + barPadding) * data.length + leftAndRightSpaces * 2 + rightSvgWidth - barPadding // no padding after last bar
-            );
-            innerContainer.style('overflow-x', 'auto');
-        }
-        else {
-            barWidth = Math.max(40, (width - rightSvgWidth - leftAndRightSpaces * 2) / data.length);
-            barPadding = 0;
-            requiredSvgWidth = width - rightSvgWidth;
-        }
         var svg = innerContainer
             .append('svg')
-            .attr('width', requiredSvgWidth)
-            .attr('height', height + margin.top + margin.bottom + 30)
+            // .attr('width', 150 * data.length + margin.left + margin.right)
+            .attr('width', width - rightSvgWidth)
+            .attr('height', height + margin.top + margin.bottom)
+            // .call(ChartHelper.responsivefy)
             .append('g')
             .attr('transform', 'translate(' + 0 + ',' + margin.top + ')');
         let stackKey = keyList;
@@ -7383,25 +7356,31 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             ])
                 .range([height, 0]);
         }
-        // Calculate bar width for mobile to avoid overlap
-        // ...barWidth is now calculated above, remove duplicate...
         var xScale = d3
             .scaleBand()
             .rangeRound([
+            width - rightSvgWidth - leftAndRightSpaces,
             leftAndRightSpaces,
-            width - rightSvgWidth - leftAndRightSpaces
         ])
             .domain(data.map(function (d) {
             return d.name;
-        }).reverse())
-            .padding(isMobile ? 0.2 : 0.5);
+        }));
+        // xScale.bandwidth(192);
         var xScaleFromOrigin = d3
             .scaleBand()
             .rangeRound([width - rightSvgWidth, 0])
             .domain(data.map(function (d) {
             return d.name;
-        }).reverse());
-        // ...existing code...
+        }));
+        /**
+         * xScale for weekly charts does not need padding as this padding affects spacing between the dot and y axis
+         */
+        if (this.chartConfiguration.isMultiChartGridLine == undefined) {
+            xScale.padding(0.5);
+        }
+        else {
+            xScale.align(0.5);
+        }
         /**
          * draw second x axis on top
          */
@@ -7429,10 +7408,9 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 svg
                     .append('g')
                     .attr('class', `x${j + 2} axis${j + 2}`)
-                    .style('color', 'var(--chart-grid-color)') // Use CSS variable instead of hardcoded
+                    .style('color', '#999999')
                     .attr('transform', 'translate(0,' + height * this.chartConfiguration.xAxisGrid[j] + ')')
-                    .call(d3.axisBottom(xScale).tickSize(0).ticks(5).tickFormat(''))
-                    .style('fill', 'var(--chart-text-color)');
+                    .call(d3.axisBottom(xScale).tickSize(0).ticks(5).tickFormat(''));
             }
         }
         let yScale = d3.scaleLinear().rangeRound([height, 0]);
@@ -7504,8 +7482,8 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .ticks(self.chartConfiguration.numberOfYTicks)
                 .tickSize(-width)
                 .tickFormat(''))
-                // Remove hardcoded colors and use CSS variables
-                .style('color', 'var(--chart-grid-color)')
+                // .style('stroke-dasharray', '5 5')
+                .style('color', '#B9B9B9')
                 .style('opacity', '0.5')
                 .call((g) => g.select('.domain').remove());
         }
@@ -7535,47 +7513,35 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             }
         })
             .attr('y', function (d) {
-            if (!isNaN(d[0]) && !isNaN(d[1])) {
-                const actualHeight = yScale(d[0]) - yScale(d[1]);
-                return actualHeight < 3 ? yScale(d[0]) - 3 : yScale(d[1]);
-            }
-            return 0;
+            return yScale(d[1]);
         })
-            .attr('x', function (d, i) {
-            if (isMobile) {
-                // On mobile, position bars with padding
-                return leftAndRightSpaces + i * (barWidth + barPadding);
-            }
+            .attr('x', function (d) {
             if (self.chartConfiguration.isMultiChartGridLine == undefined) {
                 return xScale(d.data.name);
             }
             else {
                 if (self.chartConfiguration.isDrilldownChart &&
                     self.chartData.data.length <= 3) {
-                    return xScale(d.data.name) + xScale.bandwidth() / 2 - 35;
+                    return xScale(d.data.name) + xScale.bandwidth() / 2 - 70;
                 }
                 return xScale(d.data.name) + xScale.bandwidth() * 0.1;
             }
         })
             .attr('height', function (d) {
-            if (!isNaN(d[0]) && !isNaN(d[1])) {
-                const actualHeight = yScale(d[0]) - yScale(d[1]);
-                return actualHeight < 3 ? 3 : actualHeight;
-            }
+            if (!isNaN(d[0]) && !isNaN(d[1]))
+                return yScale(d[0]) - yScale(d[1]);
             return 0;
         })
-            .attr('width', function (d) {
-            // Use calculated barWidth for mobile, otherwise scale
-            if (isMobile) {
-                return barWidth;
-            }
-            return self.chartConfiguration.isMultiChartGridLine == undefined
-                ? xScale.bandwidth()
-                : self.chartConfiguration.isDrilldownChart &&
-                    self.chartData.data.length <= 3
-                    ? 70
-                    : xScale.bandwidth() * 0.8;
-        })
+            /**
+             * width of the rect
+             * for weekly charts, there is no paddings; hence we use hald of bandwidth as width of the bars
+             */
+            .attr('width', self.chartConfiguration.isMultiChartGridLine == undefined
+            ? xScale.bandwidth()
+            : self.chartConfiguration.isDrilldownChart &&
+                self.chartData.data.length <= 3
+                ? 140
+                : xScale.bandwidth() * 0.8)
             // .style('cursor', 'pointer');
             .style('cursor', function (d) {
             if (metaData.hasDrillDown) {
@@ -7689,56 +7655,98 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             svg
                 .append('foreignObject')
                 .attr('x', function () {
+                // if (metaData.hasDrillDown) {
                 if (xScale.bandwidth() + leftAndRightSpaces * 2 > 180) {
                     return (xScale(d.data.name) -
                         leftAndRightSpaces +
                         (xScale.bandwidth() + leftAndRightSpaces * 2 - 180) / 2);
                 }
                 return xScale(d.data.name) - leftAndRightSpaces;
+                // } else return xScale(d.data.name) - leftAndRightSpaces;
             })
                 .attr('class', 'lib-verticalstack-title-ontop')
                 .attr('y', function () {
-                // Increase the gap between the bar and the tooltip (was -1 - 40)
-                return yScale(d[1]) - 1 - 50; // 10px more gap
+                return yScale(d[1]) - 1 - 40;
             })
                 .attr('dy', function () {
                 return d.class;
             })
                 .attr('width', function () {
+                // if (metaData.hasDrillDown) {
                 if (xScale.bandwidth() + leftAndRightSpaces * 2 > 180) {
                     return '180px';
                 }
                 return xScale.bandwidth() + leftAndRightSpaces * 2;
+                // } else return xScale.bandwidth() + leftAndRightSpaces * 2;
             })
                 .attr('height', 40)
                 .append('xhtml:div')
                 .attr('class', 'title')
                 .style('z-index', 99)
                 .html(function () {
-                // Tooltip content without any arrow mark
                 if (!isNaN(d[1] - d[0])) {
-                    if (d[1] - d[0] === 0) {
-                        return '<span class="title-top-text">0</span>';
+                    if (d[1] - d[0] == 0) {
+                        return;
                     }
                     var dataType = metaData.dataType ? metaData.dataType : '';
                     var desiredText = '';
-                    // Always show the full x-axis label (category name) in the tooltip
-                    desiredText =
-                        '<span class="title-bar-name">' +
-                            (d.data.name ? d.data.name : '') +
-                            '</span>';
-                    desiredText += metaData.unit
-                        ? '<span class="title-top-text">' +
-                            metaData.unit +
-                            (d[1] - d[0]) +
-                            dataType +
-                            '</span>'
-                        : '<span class="title-top-text">' +
-                            (d[1] - d[0]) +
-                            dataType +
-                            '</span>';
-                    // No arrow mark or arrow HTML/CSS in tooltip
-                    return desiredText;
+                    if (self.isZoomedOut) {
+                        desiredText =
+                            '<span class="title-bar-name">' +
+                                (d.data.name && d.data.name.length > 12
+                                    ? d.data.name.substring(0, 9) + '...'
+                                    : d.data.name) +
+                                '</span>';
+                    }
+                    if (d[1] - d[0] <= 999 ||
+                        self.chartConfiguration.backendFormatterHasPriority) {
+                        desiredText += metaData.unit
+                            ? '<span class="title-top-text">' +
+                                metaData.unit +
+                                formatFromBackend(d[1] - d[0]) +
+                                dataType +
+                                '</span>'
+                            : '<span class="title-top-text">' +
+                                formatFromBackend(d[1] - d[0]) +
+                                dataType +
+                                '</span>';
+                        if (metaData.hasDrillDown &&
+                            !self.isZoomedOut &&
+                            (!metaData.barWithoutClick ||
+                                !metaData.barWithoutClick.length ||
+                                !metaData.barWithoutClick.includes(d.data.name.toLowerCase()))) {
+                            desiredText +=
+                                '<span class="title-bottom-text">Click for more details</span>';
+                            return desiredText;
+                        }
+                        else {
+                            return desiredText;
+                        }
+                    }
+                    else {
+                        desiredText += metaData.unit
+                            ? '<span class="title-top-text">' +
+                                metaData.unit +
+                                formatForHugeNumbers(d[1] - d[0]) +
+                                dataType +
+                                '</span>'
+                            : '<span class="title-top-text">' +
+                                formatForHugeNumbers(d[1] - d[0]) +
+                                dataType +
+                                '</span>';
+                        if (metaData.hasDrillDown &&
+                            !self.isZoomedOut &&
+                            (!metaData.barWithoutClick ||
+                                !metaData.barWithoutClick.length ||
+                                !metaData.barWithoutClick.includes(d.data.name.toLowerCase()))) {
+                            desiredText +=
+                                '<span class="title-bottom-text">Click for more details</span>';
+                            return desiredText;
+                        }
+                        else {
+                            return desiredText;
+                        }
+                    }
                 }
                 else
                     return;
@@ -7866,54 +7874,25 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             });
         }
         if (this.chartConfiguration.isMultiChartGridLine == undefined) {
-            if (isMobile) {
-                // Custom x-axis label rendering for mobile: evenly distribute under each bar
-                svg.selectAll('.custom-x-label').remove();
-                data.forEach(function (d, i) {
-                    const xVal = leftAndRightSpaces + i * (barWidth + barPadding) + barWidth / 2;
-                    svg.append('text')
-                        .attr('class', 'custom-x-label')
-                        .attr('x', 0)
-                        .attr('y', height + 18)
-                        .attr('text-anchor', 'middle')
-                        .attr('transform', 'translate(' + (xVal + 20) + ',0)') // current value + 20
-                        .style('font-size', '10px')
-                        .style('fill', 'var(--chart-text-color)')
-                        .style('writing-mode', 'sideways-lr') // writing mode for mobile
-                        .text(d.name.substring(0, 3));
-                });
-            }
-            else {
-                svg
-                    .append('g')
-                    .attr('transform', 'translate(0,' + height + ')')
-                    .attr('class', 'lib-stacked-x-axis-text')
-                    .call(xAxis)
-                    .selectAll('text')
-                    .style('fill', 'var(--chart-text-color)')
-                    .style('font-size', '12px')
-                    .attr('text-anchor', 'middle')
-                    .attr('dx', '0')
-                    .attr('dy', '0.71em')
-                    .attr('transform', null)
-                    .text(function (d) {
-                    return d;
-                });
-            }
+            svg
+                .append('g')
+                .attr('transform', 'translate(0,' + height + ')')
+                .attr('class', 'lib-stacked-x-axis-text')
+                .attr('transform', 'translate(0,' + height + ')')
+                .call(xAxis);
             svg
                 .append('g')
                 .attr('class', 'lib-stacked-y-axis-text')
                 .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
                 .attr('transform', 'translate(0,0)')
-                .call(yAxis)
-                .selectAll('text')
-                .style('fill', 'var(--chart-text-color)');
+                .call(yAxis);
         }
         else if (this.chartConfiguration.isDrilldownChart) {
             svg
                 .append('g')
                 .attr('transform', 'translate(0,' + height + ')')
                 .attr('class', 'lib-stacked-x-axis-text multichart1')
+                // .attr('transform', 'translate(0,' + height + ')')
                 .call(xAxis)
                 .style('display', 'none');
             svgYAxisLeft
@@ -7921,9 +7900,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
                 .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
                 .attr('transform', 'translate(0,0)')
-                .call(yAxis)
-                .selectAll('text')
-                .style('fill', 'var(--chart-text-color)');
+                .call(yAxis);
             svgYAxisRight
                 .append('g')
                 .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
@@ -7938,17 +7915,14 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('transform', 'translate(0,' + height + ')')
                 .attr('class', 'lib-stacked-x-axis-text multichart')
                 .attr('transform', 'translate(0,' + height + ')')
-                .call(xAxis)
-                .selectAll('text')
-                .style('fill', 'var(--chart-text-color)');
+                .call(xAxis);
+            // .call(g => g.select(".domain").remove());
             svg
                 .append('g')
                 .attr('class', 'lib-stacked-y-axis-text yaxis-dashed')
                 .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
                 .attr('transform', 'translate(0,0)')
-                .call(yAxis)
-                .selectAll('text')
-                .style('fill', 'var(--chart-text-color)');
+                .call(yAxis);
         }
         /**
          * for existing charts, place xaxis labels nearer to xaxis
@@ -8046,31 +8020,11 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .selectAll('g.x1.axis1 g.tick text')
                 .attr('class', 'lib-xaxis-labels-texts-drilldown')
                 .attr('y', short_tick_length_bg)
-                .text(function (d, i) {
-                if (isMobile) {
-                    // If label has more than one word, show only first 3 letters of first word
-                    var firstWord = d.split(' ')[0];
-                    return firstWord.substring(0, 3);
-                }
+                .text(function (d) {
                 if (d.trim().indexOf(' ') > -1) {
                     return d.trim().substring(0, d.indexOf(' ')).toLowerCase();
                 }
                 return d.toLowerCase();
-            })
-                .attr('transform', function (d, i) {
-                if (isMobile) {
-                    var totalBars = 0;
-                    if (this.parentNode && this.parentNode.parentNode) {
-                        totalBars = d3.select(this.parentNode.parentNode).selectAll('g.tick').size();
-                    }
-                    if (totalBars === 2) {
-                        return 'translate(0,0)';
-                    }
-                    else {
-                        return 'translate(' + (i * 30) + ',0)';
-                    }
-                }
-                return null;
             });
             svg
                 .selectAll('g.x1.axis1 g.tick')
@@ -8079,20 +8033,10 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('y', long_tick_length_bg)
                 .attr('fill', 'currentColor')
                 .text(function (d) {
-                // For mobile, do not print the second word at all
-                if (isMobile) {
-                    return '';
-                }
                 if (d.trim().indexOf(' ') > -1) {
                     return d.trim().substring(d.indexOf(' '), d.length).toLowerCase();
                 }
                 return '';
-            })
-                .attr('transform', function (d, i) {
-                if (isMobile && i === 0) {
-                    return 'translate(20,0)';
-                }
-                return null;
             });
         }
         /**
@@ -8120,14 +8064,14 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             this.chartConfiguration.isYaxisDashed) {
             d3.selectAll('.yaxis-dashed')
                 .style('stroke-dasharray', '5 5')
-                .style('color', 'var(--chart-grid-color)'); // Use CSS variable
+                .style('color', '#999999');
         }
         /**
          * x axis color
          * used by weekly charts
          */
         if (this.chartConfiguration.isXaxisColor != undefined) {
-            d3.selectAll('.multichart').style('color', this.chartConfiguration.isXaxisColor || 'var(--chart-text-color)');
+            d3.selectAll('.multichart').style('color', this.chartConfiguration.isXaxisColor);
         }
         /**
          * used to display y label
@@ -8135,51 +8079,30 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         if (this.isZoomedOut) {
             svg
                 .selectAll('.lib-xaxis-labels-texts-drilldown')
-                .attr('transform', 'rotate(-90)')
-                .attr('text-anchor', 'end')
-                .attr('x', '-5')
-                .attr('dy', null);
-        }
-        function styleAxisDomain() {
-            svg.selectAll('.domain')
-                .style('stroke', 'var(--chart-axis-color)')
-                .style('stroke-width', '1px');
-            svgYAxisLeft.selectAll('.domain')
-                .style('stroke', 'var(--chart-axis-color)')
-                .style('stroke-width', '1px');
-            svgYAxisRight.selectAll('.domain')
-                .style('stroke', 'var(--chart-axis-color)')
-                .style('stroke-width', '1px');
+                .attr('class', 'lib-display-hidden');
         }
-        styleAxisDomain();
         if (metaData.yLabel) {
-            svgYAxisLeft.selectAll('.lib-axis-group-label, .lib-ylabel-drilldowncharts, .lib-ylabel-weeklyCharts').remove();
-            function isAcronym(label) {
-                return (label.length <= 4 && /^[A-Z]+$/.test(label)) || (label === label.toUpperCase() && /[A-Z]/.test(label));
-            }
-            const yLabelText = metaData.yLabel;
-            const isAcr = isAcronym(yLabelText.replace(/[^A-Za-z]/g, ''));
-            const yPosition = isria ? 0 - margin.left / 2 - 30 : 0 - margin.left / 2 - 40;
             svgYAxisLeft
                 .append('text')
-                .attr('class', function () {
-                let baseClass = 'lib-axis-group-label font-size-1';
-                if (self.chartConfiguration.isDrilldownChart)
-                    return baseClass + ' lib-ylabel-drilldowncharts';
-                if (self.chartConfiguration.isMultiChartGridLine != undefined)
-                    return baseClass + ' lib-ylabel-weeklyCharts';
-                return baseClass + ' lib-axis-waterfall-label';
-            })
+                .attr('class', 'lib-axis-group-label font-size-1')
                 .attr('style', self.chartConfiguration.yAxisCustomlabelStyles)
                 .attr('transform', 'rotate(-90)')
-                .attr('y', yPosition)
+                .attr('y', 0 - margin.left / 2 - 20 - 15)
                 .attr('x', 0 - height / 2)
                 .attr('dy', '1em')
                 .style('text-anchor', 'middle')
-                .style('fill', 'var(--chart-text-color)')
-                .style('color', 'var(--chart-text-color)')
-                .text(isAcr ? yLabelText.toUpperCase() : yLabelText.toLowerCase())
-                .style('text-transform', isAcr ? 'none' : 'capitalize');
+                .text(metaData.yLabel.toLowerCase())
+                .style('text-transform', 'capitalize');
+            if (this.chartConfiguration.isDrilldownChart) {
+                svg
+                    .selectAll('.lib-axis-group-label')
+                    .attr('class', 'lib-ylabel-drilldowncharts');
+            }
+            else if (this.chartConfiguration.isMultiChartGridLine != undefined) {
+                svg
+                    .selectAll('.lib-axis-group-label')
+                    .attr('class', 'lib-ylabel-weeklyCharts');
+            }
         }
         if (this.chartData.targetLineData) {
             const yZero = yScale(parsedNum);
@@ -8205,7 +8128,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .attr('height', 50)
                 .append('xhtml:div')
                 .attr('class', 'target-display')
-                .style('color', 'var(--chart-text-color)')
+                .style('color', this.chartData.targetLineData.color)
                 .html(function (d, i) {
                 let dataTypeTemp = '';
                 let targetLineName = 'target';
@@ -8241,29 +8164,23 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
                 .text(metaData.lineyLabel);
         }
         if (metaData.xLabel) {
-            function isAcronym(label) {
-                return ((label.length <= 4 && /^[A-Z]+$/.test(label)) ||
-                    (label === label.toUpperCase() && /[A-Z]/.test(label)));
-            }
-            const xLabelText = metaData.xLabel;
-            const isAcr = isAcronym(xLabelText.replace(/[^A-Za-z]/g, ''));
-            const xPosition = isria ? (height + margin.top + margin.bottom) : (height + margin.top + margin.bottom + 10);
             svg
                 .append('text')
-                .attr('class', function () {
-                let baseClass = 'lib-axis-group-label font-size-1';
-                if (self.chartConfiguration.isDrilldownChart)
-                    return baseClass + ' lib-xlabel-drilldowncharts';
-                if (self.chartConfiguration.isMultiChartGridLine != undefined)
-                    return baseClass + ' lib-xlabel-weeklyCharts';
-                return baseClass + ' lib-axis-waterfall-label';
-            })
-                .attr('style', self.chartConfiguration.xAxisCustomlabelStyles)
-                .attr('transform', 'translate(' + width / 2 + ' ,' + xPosition + ')')
+                .attr('class', 'lib-axis-waterfall-label')
+                .attr('transform', 'translate(' + width / 2 + ' ,' + (height + margin.top + 20) + ')')
                 .style('text-anchor', 'middle')
-                .style('fill', 'var(--chart-text-color)')
-                .text(isAcr ? xLabelText.toUpperCase() : xLabelText.toLowerCase())
-                .style('text-transform', isAcr ? 'none' : 'capitalize');
+                .text(metaData.xLabel.toLowerCase())
+                .style('text-transform', 'capitalize');
+        }
+        if (yLineAxis != null) {
+            if (lineData && self.chartConfiguration.showLineChartAxis) {
+                svg
+                    .append('g')
+                    .attr('class', 'lib-stacked-y-axis-text')
+                    .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
+                    .attr('transform', 'translate(' + width + ',0)')
+                    .call(yLineAxis);
+            }
         }
         if (lineData && colors) {
             var dataGroup = d3