pace-chart-lib 1.0.41 → 1.0.42

package/dist/Components/Charts/Core/DefaultProperties.types.d.ts

@@ -569,6 +569,9 @@ export declare const defaultChartFormatOptions: {
         dataTableDisplayUnits: string;
         dataTableLabelColor: commonColors;
         dataTableAxisLabel: boolean;
+        dataTableLegends: boolean;
+        disableLegendIcon: boolean;
+        legendsWrapText: boolean;
     };
     dataTableOuterBorder: {
         borderButtonVisibility: boolean;

package/dist/pace-chart-lib.es.js

@@ -11446,7 +11446,10 @@ const defaultChartFormatOptions = {
     dataTableDecimalPrecision: "2",
     dataTableDisplayUnits: "None",
     dataTableLabelColor: commonColors.black,
-    dataTableAxisLabel: true
+    dataTableAxisLabel: true,
+    dataTableLegends: true,
+    disableLegendIcon: true,
+    legendsWrapText: false
   },
   dataTableOuterBorder: {
     borderButtonVisibility: true,
@@ -11709,6 +11712,7 @@ function calculateHorizontalMargins(windowWidth, windowHeight, maxNumberForPrima
     const yAxisRelatedMargin = isBarChart ? metrics.xTitle + metrics.xLabel : metrics.yTitle + metrics.yLabel;
     const legendPosition = formatOptions.legends.legendPosition;
     const legendVisibility = formatOptions.legends.legendVisibility;
+    const yAxisPosition = formatOptions.xAxisLabel.xAxisPosition;
     let left2 = 0;
     let right2 = 0;
     const secondaryExtra = isSecondaryAxisDrawn ? metrics.secondaryYLabel + metrics.secondaryAxisTitleWidth : 0;
@@ -11719,16 +11723,16 @@ function calculateHorizontalMargins(windowWidth, windowHeight, maxNumberForPrima
         left2 = yAxisRelatedMargin + 5;
         break;
       case staticLegendPosition.top:
-        right2 = 15 + secondaryExtra;
-        left2 = yAxisRelatedMargin + 5;
+        right2 = yAxisPosition == "1" ? yAxisRelatedMargin + 5 : 15 + secondaryExtra;
+        left2 = yAxisPosition == "1" ? 15 + secondaryExtra : yAxisRelatedMargin + 5;
         break;
       case staticLegendPosition.right:
-        right2 = metrics.legendMargin + secondaryExtra + 35;
-        left2 = yAxisRelatedMargin + 5;
+        right2 = yAxisPosition == "1" ? yAxisRelatedMargin + 5 + metrics.legendMargin : metrics.legendMargin + secondaryExtra + 35;
+        left2 = yAxisPosition == "1" ? 15 + secondaryExtra + metrics.legendMargin : yAxisRelatedMargin + 5;
         break;
       case staticLegendPosition.bottom:
-        right2 = 15 + secondaryExtra;
-        left2 = yAxisRelatedMargin + 5;
+        right2 = yAxisPosition == "1" ? yAxisRelatedMargin + 5 : 15 + secondaryExtra;
+        left2 = yAxisPosition == "1" ? 15 + secondaryExtra : yAxisRelatedMargin + 5;
         break;
       case staticLegendPosition.left:
         left2 = metrics.legendMargin + yAxisRelatedMargin + 33;
@@ -12459,7 +12463,7 @@ function initYaxis$1(gTag, formatOptions, dataTableHeight, yLabel, yAxisLeft, in
       formatOptions.yAxisLabel.yAxisLabelVisibility ? formatOptions.yAxisLabel.yAxisBackgroundColor ? formatOptions.yAxisLabel.yAxisBackgroundColor !== commonColors.white ? formatOptions.yAxisLabel.yAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
     );
     const yAxisG = gTag.append("g").call(yAxisLeft);
-    yAxisG.selectAll("line").style("shape-rendering", "crispEdges").attr("stroke", formatOptions.plotArea.gridLinesColor).attr("stroke-width", "0.05em").attr("stroke-opacity", formatOptions.plotArea.fitChart ? "1" : "0");
+    yAxisG.selectAll("line").style("shape-rendering", "crispEdges").attr("stroke", formatOptions.plotArea.gridLinesColor).attr("stroke-width", "0.05em");
     yAxisG.selectAll("text").style(
       "fill",
       formatOptions.yAxisLabel.yAxisLabelColor !== commonColors.white ? formatOptions.yAxisLabel.yAxisLabelColor : "none"
@@ -14035,7 +14039,7 @@ function addDataTable(isFitChart, svg, currentTag, dataTable, colWidth, yAxis, x
       if (i == 0) {
         temp.append("foreignObject").attr("x", -margin.left).attr("y", tableStartY).attr("class", "blankClass").attr("width", margin.left).attr("height", 20).append("xhtml:div").style("width", margin.left).style("height", `${20}px`).style(
           "border-width",
-          outerBorder ? `0px ${0}px ${outerBorderLineWidth}px 0px` : "0px 0px 0px 0px"
+          outerBorder ? `0px ${0}px ${!formatOptions.dataTableProperties.dataTableAxisLabel ? 0 : outerBorderLineWidth}px 0px` : "0px 0px 0px 0px"
         ).style(
           "border-style",
           outerBorder ? `solid ${outerBorderLineStyle} ${outerBorderLineStyle} solid` : "solid solid solid solid"
@@ -14045,7 +14049,7 @@ function addDataTable(isFitChart, svg, currentTag, dataTable, colWidth, yAxis, x
         ).style("text-align", "center").style("vertical-align", "middle").text("");
       }
       let legendsParentTag = temp.append("foreignObject").attr("x", -margin.left).attr("y", tableStartY + yCordinate).attr("width", margin.left).attr("height", cellHeight2);
-      let innerdiv = legendsParentTag.append("xhtml:div").style("display", "flex").style("justify-content", "flex-start").style("align-items", "center").attr("class", "parentClass").style("flex-wrap", "nowrap").style("pointer-events", "auto").style("width", cellWidth).style("height", `${cellHeight2}px`).style("padding-left", `5px`).style("padding-right", `3px`).style(
+      let innerdiv = legendsParentTag.append("xhtml:div").style("display", "flex").style("justify-content", "flex-start").style("align-items", "center").attr("class", "parentClass").style("flex-wrap", "nowrap").style("pointer-events", "auto").style("width", cellWidth).style("height", `${cellHeight2}px`).style("padding-left", formatOptions.dataTableProperties.disableLegendIcon ? `2px` : `5px`).style("padding-right", `3px`).style(
         "border-width",
         getBorderStyle(
           formatOptions,
@@ -14076,22 +14080,24 @@ function addDataTable(isFitChart, svg, currentTag, dataTable, colWidth, yAxis, x
           "color"
         )
       );
-      switch (chartType) {
-        case chartTypes.ColumnChart:
-        case chartTypes.StackColumnChart:
-        case chartTypes.NormalizedStackColumnChart:
-          innerdiv.append("xhtml:div").style("height", "10px").style("width", "15px").style("background", data.properties.color).style("border-radius", "1px");
-          break;
-        case chartTypes.LineChart:
-        case chartTypes.StackLineChart:
-        case chartTypes.NormalizedStackLineChart:
-          getLineShape(data, innerdiv, formatOptions);
-          break;
-        case chartTypes.AreaChart:
-        case chartTypes.StackAreaChart:
-        case chartTypes.NormalizedStackAreaChart:
-          getAreaShape(data, innerdiv, formatOptions);
-          break;
+      if (!formatOptions.dataTableProperties.disableLegendIcon) {
+        switch (chartType) {
+          case chartTypes.ColumnChart:
+          case chartTypes.StackColumnChart:
+          case chartTypes.NormalizedStackColumnChart:
+            innerdiv.append("xhtml:div").style("height", "10px").style("width", "15px").style("background", data.properties.color).style("border-radius", "1px");
+            break;
+          case chartTypes.LineChart:
+          case chartTypes.StackLineChart:
+          case chartTypes.NormalizedStackLineChart:
+            getLineShape(data, innerdiv, formatOptions);
+            break;
+          case chartTypes.AreaChart:
+          case chartTypes.StackAreaChart:
+          case chartTypes.NormalizedStackAreaChart:
+            getAreaShape(data, innerdiv, formatOptions);
+            break;
+        }
       }
       let text = "";
       {
@@ -14135,7 +14141,13 @@ function addDataTable(isFitChart, svg, currentTag, dataTable, colWidth, yAxis, x
     dataTable.forEach((data, i) => {
       yCordinate = yCordinate + (!formatOptions.dataTableProperties.dataTableAxisLabel && i === 0 ? 0 : cellHeight);
       cellHeight = data.properties.height;
-      getLegendsAppended(tag, i, data, cellHeight);
+      if (formatOptions.dataTableProperties.dataTableLegends) {
+        if (!isFitChart) {
+          getLegendsAppended(tag, i, data, cellHeight);
+        } else {
+          getLegendsAppended(tag, i, data, cellHeight);
+        }
+      }
       let parentTag = tag.append("g").attr("class", "dataTableBorder").selectAll("#scaling-svg" + chartId + " .foreignObject").data((d, pos) => data["data"]).enter().filter((d) => xAxis(d.dimension)).append("g").attr("fill", commonColors.transparent).attr(
         "transform",
         (d, index2) => `translate(${index2 === 0 ? 0 : xAxis(d.dimension) - cellWidth / 2},0)`
@@ -14532,11 +14544,11 @@ function getBorderStyle(formatOptions, position, currentCellIndex, totalDimensio
           borderStyle = `solid solid solid solid`;
           borderColor = `black black black black`;
         } else if (outerBorder && !innerHorizontalBorder && !innerVerticalBorder) {
-          borderWidth = `${0}px ${0}px ${0}px ${outerBorderLineWidth}px`;
+          borderWidth = `${outerBorderLineWidth}px ${0}px ${0}px ${outerBorderLineWidth}px`;
           borderStyle = `${outerBorderLineStyle} solid solid ${outerBorderLineStyle}`;
           borderColor = `${outerBorderLineColor} black black ${outerBorderLineColor}`;
         } else if (outerBorder && !innerHorizontalBorder && innerVerticalBorder) {
-          borderWidth = `${0}px ${0}px ${0}px ${outerBorderLineWidth}px`;
+          borderWidth = `${outerBorderLineWidth}px ${0}px ${0}px ${outerBorderLineWidth}px`;
           borderStyle = `${outerBorderLineStyle} ${innerVerticalBorderLineStyle} solid ${outerBorderLineStyle}`;
           borderColor = `${outerBorderLineColor} ${innerVerticalBorderLineColor} black ${outerBorderLineColor}`;
         } else if (outerBorder && innerHorizontalBorder && innerVerticalBorder) {
@@ -20856,7 +20868,7 @@ function initYaxis(gTag, formatOptions, dataTableHeight, yLabel, yAxisLeft, inne
       formatOptions.yAxisLabel.yAxisLabelVisibility ? formatOptions.yAxisLabel.yAxisBackgroundColor ? formatOptions.yAxisLabel.yAxisBackgroundColor !== commonColors.white ? formatOptions.yAxisLabel.yAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
     );
     const yAxisG = gTag.append("g").call(yAxisLeft);
-    yAxisG.selectAll("line").style("shape-rendering", "crispEdges").attr("stroke", formatOptions.plotArea.gridLinesColor).attr("stroke-width", "0.05em").attr("stroke-opacity", formatOptions.plotArea.fitChart ? "1" : "0");
+    yAxisG.selectAll("line").style("shape-rendering", "crispEdges").attr("stroke", formatOptions.plotArea.gridLinesColor).attr("stroke-width", "0.05em");
     yAxisG.selectAll("text").style(
       "fill",
       formatOptions.yAxisLabel.yAxisLabelColor !== commonColors.white ? formatOptions.yAxisLabel.yAxisLabelColor : "none"
@@ -22110,7 +22122,7 @@ const LineChart = ({
         void 0,
         void 0,
         dataTableHeight,
-        "Line",
+        chartType,
         formatOptions,
         yLabel,
         yTitle,
@@ -22648,7 +22660,7 @@ const StackLineChart = ({
         void 0,
         void 0,
         dataTableHeight,
-        "Line",
+        chartTypes.LineChart,
         formatOptions,
         yLabel,
         yTitle,
@@ -23176,7 +23188,7 @@ const NormalisedStackLineChart = ({
         void 0,
         void 0,
         dataTableHeight,
-        "Line",
+        chartTypes.LineChart,
         formatOptions,
         yLabel,
         yTitle,
@@ -23396,28 +23408,32 @@ const HorizontalBarChart = ({
       innerWidth2,
       innerHeight2
     );
-    yAxistitle$1(
-      innerHeight2,
-      formatOptions,
-      dataTableHeight,
-      barChart,
-      svg,
-      margin,
-      yTitle,
-      yLabel,
-      innerWidth2
-    );
-    formatOptions.xAxisLabel.xAxisPosition == "2" && yAxistitleRight(
-      svg,
-      isSecondaryAxisDrawn,
-      margin,
-      formatOptions,
-      dataTableHeight,
-      innerHeight2,
-      innerWidth2,
-      secondaryYLabel,
-      secondaryAxisTitleWidth
-    );
+    if (formatOptions.xAxisLabel.xAxisPosition != "1") {
+      yAxistitle$1(
+        innerHeight2,
+        formatOptions,
+        dataTableHeight,
+        barChart,
+        svg,
+        margin,
+        yTitle,
+        yLabel,
+        innerWidth2
+      );
+    }
+    if (formatOptions.xAxisLabel.xAxisPosition == "1") {
+      yAxistitleRight(
+        svg,
+        isSecondaryAxisDrawn,
+        margin,
+        formatOptions,
+        dataTableHeight,
+        innerHeight2,
+        innerWidth2,
+        secondaryYLabel,
+        secondaryAxisTitleWidth
+      );
+    }
     setChartTitle(svg, formatOptions, width, chartTitleHeight);
     drawLegends(
       height,
@@ -26677,7 +26693,7 @@ const AreaChart = ({
         void 0,
         void 0,
         dataTableHeight,
-        "Area",
+        chartType,
         formatOptions,
         yLabel,
         yTitle,
@@ -53787,7 +53803,7 @@ const BubbleChart = ({
     let tempLegendEntries = legendEntries;
     maxLegendDimensions = calculateLegendsMaxPossibleWidth(
       chartFormatOptions,
-      tempLegendEntries,
+      tempLegendEntries ?? [],
       "alias"
     );
     let convertedData = convertIncomingData(data);
@@ -53871,6 +53887,18 @@ const BubbleChart = ({
     drawReferenceLines();
     initLegendList();
     initCircles();
+    setnumberOfBubbles(
+      svg,
+      chartFormatOptions.legends.legendPosition,
+      chartFormatOptions,
+      height,
+      width,
+      margins,
+      innerHeight2,
+      xTitle,
+      xLabel,
+      data.length
+    );
   };
   const initCircles = () => {
     try {
@@ -54019,7 +54047,7 @@ const BubbleChart = ({
           formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2"
         )
       ).tickSize(
-        chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesVertical ? chartFormatOptions.xAxisLabel.xAxisPosition === "0" ? -innerHeight2 : chartFormatOptions.xAxisLabel.xAxisPosition === "1" ? innerHeight2 : 0 : 0 : 0
+        getVerticalGridLinesTickSize(formatOptions, innerHeight2, 0)
       ).tickValues(autoLabelFlag ? void 0 : xAxisLabelArray.length > 0 ? xAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
       initXaxis(
         chartAreaTagG,
@@ -54115,7 +54143,7 @@ const BubbleChart = ({
   };
   const initLegendList = () => {
     try {
-      let tempLegendEntries = legendEntries.map((d) => {
+      let tempLegendEntries = legendEntries?.map((d) => {
         let modifiedProperties = {
           ...d,
           legendFontStyle: d.fontStyle,
@@ -54131,7 +54159,7 @@ const BubbleChart = ({
       initLegendListWithTotalValueAllowance(
         chartFormatOptions,
         svg,
-        tempLegendEntries,
+        tempLegendEntries || [],
         width,
         height,
         maxLegendDimensions[0],

package/dist/pace-chart-lib.umd.js

@@ -11449,7 +11449,10 @@
       dataTableDecimalPrecision: "2",
       dataTableDisplayUnits: "None",
       dataTableLabelColor: commonColors.black,
-      dataTableAxisLabel: true
+      dataTableAxisLabel: true,
+      dataTableLegends: true,
+      disableLegendIcon: true,
+      legendsWrapText: false
     },
     dataTableOuterBorder: {
       borderButtonVisibility: true,
@@ -11712,6 +11715,7 @@
       const yAxisRelatedMargin = isBarChart ? metrics.xTitle + metrics.xLabel : metrics.yTitle + metrics.yLabel;
       const legendPosition = formatOptions.legends.legendPosition;
       const legendVisibility = formatOptions.legends.legendVisibility;
+      const yAxisPosition = formatOptions.xAxisLabel.xAxisPosition;
       let left2 = 0;
       let right2 = 0;
       const secondaryExtra = isSecondaryAxisDrawn ? metrics.secondaryYLabel + metrics.secondaryAxisTitleWidth : 0;
@@ -11722,16 +11726,16 @@
           left2 = yAxisRelatedMargin + 5;
           break;
         case staticLegendPosition.top:
-          right2 = 15 + secondaryExtra;
-          left2 = yAxisRelatedMargin + 5;
+          right2 = yAxisPosition == "1" ? yAxisRelatedMargin + 5 : 15 + secondaryExtra;
+          left2 = yAxisPosition == "1" ? 15 + secondaryExtra : yAxisRelatedMargin + 5;
           break;
         case staticLegendPosition.right:
-          right2 = metrics.legendMargin + secondaryExtra + 35;
-          left2 = yAxisRelatedMargin + 5;
+          right2 = yAxisPosition == "1" ? yAxisRelatedMargin + 5 + metrics.legendMargin : metrics.legendMargin + secondaryExtra + 35;
+          left2 = yAxisPosition == "1" ? 15 + secondaryExtra + metrics.legendMargin : yAxisRelatedMargin + 5;
           break;
         case staticLegendPosition.bottom:
-          right2 = 15 + secondaryExtra;
-          left2 = yAxisRelatedMargin + 5;
+          right2 = yAxisPosition == "1" ? yAxisRelatedMargin + 5 : 15 + secondaryExtra;
+          left2 = yAxisPosition == "1" ? 15 + secondaryExtra : yAxisRelatedMargin + 5;
           break;
         case staticLegendPosition.left:
           left2 = metrics.legendMargin + yAxisRelatedMargin + 33;
@@ -12462,7 +12466,7 @@
         formatOptions.yAxisLabel.yAxisLabelVisibility ? formatOptions.yAxisLabel.yAxisBackgroundColor ? formatOptions.yAxisLabel.yAxisBackgroundColor !== commonColors.white ? formatOptions.yAxisLabel.yAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
       );
       const yAxisG = gTag.append("g").call(yAxisLeft);
-      yAxisG.selectAll("line").style("shape-rendering", "crispEdges").attr("stroke", formatOptions.plotArea.gridLinesColor).attr("stroke-width", "0.05em").attr("stroke-opacity", formatOptions.plotArea.fitChart ? "1" : "0");
+      yAxisG.selectAll("line").style("shape-rendering", "crispEdges").attr("stroke", formatOptions.plotArea.gridLinesColor).attr("stroke-width", "0.05em");
       yAxisG.selectAll("text").style(
         "fill",
         formatOptions.yAxisLabel.yAxisLabelColor !== commonColors.white ? formatOptions.yAxisLabel.yAxisLabelColor : "none"
@@ -14038,7 +14042,7 @@
         if (i == 0) {
           temp.append("foreignObject").attr("x", -margin.left).attr("y", tableStartY).attr("class", "blankClass").attr("width", margin.left).attr("height", 20).append("xhtml:div").style("width", margin.left).style("height", `${20}px`).style(
             "border-width",
-            outerBorder ? `0px ${0}px ${outerBorderLineWidth}px 0px` : "0px 0px 0px 0px"
+            outerBorder ? `0px ${0}px ${!formatOptions.dataTableProperties.dataTableAxisLabel ? 0 : outerBorderLineWidth}px 0px` : "0px 0px 0px 0px"
           ).style(
             "border-style",
             outerBorder ? `solid ${outerBorderLineStyle} ${outerBorderLineStyle} solid` : "solid solid solid solid"
@@ -14048,7 +14052,7 @@
           ).style("text-align", "center").style("vertical-align", "middle").text("");
         }
         let legendsParentTag = temp.append("foreignObject").attr("x", -margin.left).attr("y", tableStartY + yCordinate).attr("width", margin.left).attr("height", cellHeight2);
-        let innerdiv = legendsParentTag.append("xhtml:div").style("display", "flex").style("justify-content", "flex-start").style("align-items", "center").attr("class", "parentClass").style("flex-wrap", "nowrap").style("pointer-events", "auto").style("width", cellWidth).style("height", `${cellHeight2}px`).style("padding-left", `5px`).style("padding-right", `3px`).style(
+        let innerdiv = legendsParentTag.append("xhtml:div").style("display", "flex").style("justify-content", "flex-start").style("align-items", "center").attr("class", "parentClass").style("flex-wrap", "nowrap").style("pointer-events", "auto").style("width", cellWidth).style("height", `${cellHeight2}px`).style("padding-left", formatOptions.dataTableProperties.disableLegendIcon ? `2px` : `5px`).style("padding-right", `3px`).style(
           "border-width",
           getBorderStyle(
             formatOptions,
@@ -14079,22 +14083,24 @@
             "color"
           )
         );
-        switch (chartType) {
-          case chartTypes.ColumnChart:
-          case chartTypes.StackColumnChart:
-          case chartTypes.NormalizedStackColumnChart:
-            innerdiv.append("xhtml:div").style("height", "10px").style("width", "15px").style("background", data.properties.color).style("border-radius", "1px");
-            break;
-          case chartTypes.LineChart:
-          case chartTypes.StackLineChart:
-          case chartTypes.NormalizedStackLineChart:
-            getLineShape(data, innerdiv, formatOptions);
-            break;
-          case chartTypes.AreaChart:
-          case chartTypes.StackAreaChart:
-          case chartTypes.NormalizedStackAreaChart:
-            getAreaShape(data, innerdiv, formatOptions);
-            break;
+        if (!formatOptions.dataTableProperties.disableLegendIcon) {
+          switch (chartType) {
+            case chartTypes.ColumnChart:
+            case chartTypes.StackColumnChart:
+            case chartTypes.NormalizedStackColumnChart:
+              innerdiv.append("xhtml:div").style("height", "10px").style("width", "15px").style("background", data.properties.color).style("border-radius", "1px");
+              break;
+            case chartTypes.LineChart:
+            case chartTypes.StackLineChart:
+            case chartTypes.NormalizedStackLineChart:
+              getLineShape(data, innerdiv, formatOptions);
+              break;
+            case chartTypes.AreaChart:
+            case chartTypes.StackAreaChart:
+            case chartTypes.NormalizedStackAreaChart:
+              getAreaShape(data, innerdiv, formatOptions);
+              break;
+          }
         }
         let text = "";
         {
@@ -14138,7 +14144,13 @@
       dataTable.forEach((data, i) => {
         yCordinate = yCordinate + (!formatOptions.dataTableProperties.dataTableAxisLabel && i === 0 ? 0 : cellHeight);
         cellHeight = data.properties.height;
-        getLegendsAppended(tag, i, data, cellHeight);
+        if (formatOptions.dataTableProperties.dataTableLegends) {
+          if (!isFitChart) {
+            getLegendsAppended(tag, i, data, cellHeight);
+          } else {
+            getLegendsAppended(tag, i, data, cellHeight);
+          }
+        }
         let parentTag = tag.append("g").attr("class", "dataTableBorder").selectAll("#scaling-svg" + chartId + " .foreignObject").data((d, pos) => data["data"]).enter().filter((d) => xAxis(d.dimension)).append("g").attr("fill", commonColors.transparent).attr(
           "transform",
           (d, index2) => `translate(${index2 === 0 ? 0 : xAxis(d.dimension) - cellWidth / 2},0)`
@@ -14535,11 +14547,11 @@
             borderStyle = `solid solid solid solid`;
             borderColor = `black black black black`;
           } else if (outerBorder && !innerHorizontalBorder && !innerVerticalBorder) {
-            borderWidth = `${0}px ${0}px ${0}px ${outerBorderLineWidth}px`;
+            borderWidth = `${outerBorderLineWidth}px ${0}px ${0}px ${outerBorderLineWidth}px`;
             borderStyle = `${outerBorderLineStyle} solid solid ${outerBorderLineStyle}`;
             borderColor = `${outerBorderLineColor} black black ${outerBorderLineColor}`;
           } else if (outerBorder && !innerHorizontalBorder && innerVerticalBorder) {
-            borderWidth = `${0}px ${0}px ${0}px ${outerBorderLineWidth}px`;
+            borderWidth = `${outerBorderLineWidth}px ${0}px ${0}px ${outerBorderLineWidth}px`;
             borderStyle = `${outerBorderLineStyle} ${innerVerticalBorderLineStyle} solid ${outerBorderLineStyle}`;
             borderColor = `${outerBorderLineColor} ${innerVerticalBorderLineColor} black ${outerBorderLineColor}`;
           } else if (outerBorder && innerHorizontalBorder && innerVerticalBorder) {
@@ -20859,7 +20871,7 @@
         formatOptions.yAxisLabel.yAxisLabelVisibility ? formatOptions.yAxisLabel.yAxisBackgroundColor ? formatOptions.yAxisLabel.yAxisBackgroundColor !== commonColors.white ? formatOptions.yAxisLabel.yAxisBackgroundColor : "none" : formatOptions.chartArea.chartAreaColor : formatOptions.chartArea.chartAreaColor
       );
       const yAxisG = gTag.append("g").call(yAxisLeft);
-      yAxisG.selectAll("line").style("shape-rendering", "crispEdges").attr("stroke", formatOptions.plotArea.gridLinesColor).attr("stroke-width", "0.05em").attr("stroke-opacity", formatOptions.plotArea.fitChart ? "1" : "0");
+      yAxisG.selectAll("line").style("shape-rendering", "crispEdges").attr("stroke", formatOptions.plotArea.gridLinesColor).attr("stroke-width", "0.05em");
       yAxisG.selectAll("text").style(
         "fill",
         formatOptions.yAxisLabel.yAxisLabelColor !== commonColors.white ? formatOptions.yAxisLabel.yAxisLabelColor : "none"
@@ -22113,7 +22125,7 @@
           void 0,
           void 0,
           dataTableHeight,
-          "Line",
+          chartType,
           formatOptions,
           yLabel,
           yTitle,
@@ -22651,7 +22663,7 @@
           void 0,
           void 0,
           dataTableHeight,
-          "Line",
+          chartTypes.LineChart,
           formatOptions,
           yLabel,
           yTitle,
@@ -23179,7 +23191,7 @@
           void 0,
           void 0,
           dataTableHeight,
-          "Line",
+          chartTypes.LineChart,
           formatOptions,
           yLabel,
           yTitle,
@@ -23399,28 +23411,32 @@
         innerWidth2,
         innerHeight2
       );
-      yAxistitle$1(
-        innerHeight2,
-        formatOptions,
-        dataTableHeight,
-        barChart,
-        svg,
-        margin,
-        yTitle,
-        yLabel,
-        innerWidth2
-      );
-      formatOptions.xAxisLabel.xAxisPosition == "2" && yAxistitleRight(
-        svg,
-        isSecondaryAxisDrawn,
-        margin,
-        formatOptions,
-        dataTableHeight,
-        innerHeight2,
-        innerWidth2,
-        secondaryYLabel,
-        secondaryAxisTitleWidth
-      );
+      if (formatOptions.xAxisLabel.xAxisPosition != "1") {
+        yAxistitle$1(
+          innerHeight2,
+          formatOptions,
+          dataTableHeight,
+          barChart,
+          svg,
+          margin,
+          yTitle,
+          yLabel,
+          innerWidth2
+        );
+      }
+      if (formatOptions.xAxisLabel.xAxisPosition == "1") {
+        yAxistitleRight(
+          svg,
+          isSecondaryAxisDrawn,
+          margin,
+          formatOptions,
+          dataTableHeight,
+          innerHeight2,
+          innerWidth2,
+          secondaryYLabel,
+          secondaryAxisTitleWidth
+        );
+      }
       setChartTitle(svg, formatOptions, width, chartTitleHeight);
       drawLegends(
         height,
@@ -26680,7 +26696,7 @@
           void 0,
           void 0,
           dataTableHeight,
-          "Area",
+          chartType,
           formatOptions,
           yLabel,
           yTitle,
@@ -53790,7 +53806,7 @@
       let tempLegendEntries = legendEntries;
       maxLegendDimensions = calculateLegendsMaxPossibleWidth(
         chartFormatOptions,
-        tempLegendEntries,
+        tempLegendEntries ?? [],
         "alias"
       );
       let convertedData = convertIncomingData(data);
@@ -53874,6 +53890,18 @@
       drawReferenceLines();
       initLegendList();
       initCircles();
+      setnumberOfBubbles(
+        svg,
+        chartFormatOptions.legends.legendPosition,
+        chartFormatOptions,
+        height,
+        width,
+        margins,
+        innerHeight2,
+        xTitle,
+        xLabel,
+        data.length
+      );
     };
     const initCircles = () => {
       try {
@@ -54022,7 +54050,7 @@
             formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2"
           )
         ).tickSize(
-          chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesVertical ? chartFormatOptions.xAxisLabel.xAxisPosition === "0" ? -innerHeight2 : chartFormatOptions.xAxisLabel.xAxisPosition === "1" ? innerHeight2 : 0 : 0 : 0
+          getVerticalGridLinesTickSize(formatOptions, innerHeight2, 0)
         ).tickValues(autoLabelFlag ? void 0 : xAxisLabelArray.length > 0 ? xAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
         initXaxis(
           chartAreaTagG,
@@ -54118,7 +54146,7 @@
     };
     const initLegendList = () => {
       try {
-        let tempLegendEntries = legendEntries.map((d) => {
+        let tempLegendEntries = legendEntries?.map((d) => {
           let modifiedProperties = {
             ...d,
             legendFontStyle: d.fontStyle,
@@ -54134,7 +54162,7 @@
         initLegendListWithTotalValueAllowance(
           chartFormatOptions,
           svg,
-          tempLegendEntries,
+          tempLegendEntries || [],
           width,
           height,
           maxLegendDimensions[0],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pace-chart-lib",
-  "version": "1.0.41",
+  "version": "1.0.42",
   "description": "A simple React + Vite + TS UI library with a Button using custom fonts via SCSS.",
   "license": "MIT",
   "type": "module",