diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Trendline.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Trendline.razor
index e78841f..2559728 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Trendline.razor
+++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Trendline.razor
@@ -29,7 +29,7 @@
             </ChartPrimaryYAxis>
 
             <ChartTooltipSettings Enable="true"
-                          ShowNearestTooltip="true"
+                          ShowNearestTooltip="true" Header=""
                           Format="S&P 500: <b>${point.y} Points</b>">
             </ChartTooltipSettings>
 
@@ -80,7 +80,7 @@
             </ChartPrimaryYAxis>
 
             <ChartTooltipSettings Enable=""true""
-                          ShowNearestTooltip=""true""
+                          ShowNearestTooltip=""true"" Header=""""
                           Format=""S&P 500: <b>${point.y} Points</b>"">
             </ChartTooltipSettings>
 
diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ColumnAndBarCharts/ColumnChart.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ColumnAndBarCharts/ColumnChart.razor
index 140b21d..34bf6b0 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ColumnAndBarCharts/ColumnChart.razor
+++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ColumnAndBarCharts/ColumnChart.razor
@@ -111,7 +111,7 @@
             <ChartPrimaryYAxis Title="Production (60KG Bags)" Interval="20">
                 <ChartAxisLineStyle Width="0"/>
             </ChartPrimaryYAxis>
-            <ChartTooltipSettings Enable="true" Header="${point.x}" Format="Total: ${point.stackedValue}" />
+            <ChartTooltipSettings Enable="true" Header="" Format="Total: ${point.stackedValue}" />
             
                 <ChartSeries DataSource="Data" XName="X" YName="Y1" Name="India" Type="ChartSeriesType.StackingColumn" Fill="#5C6BC0" ColumnWidth="0.4"></ChartSeries>
                 <ChartSeries DataSource="Data" XName="X" YName="Y2" Name="China" Type="ChartSeriesType.StackingColumn" Fill="#00796B" ColumnWidth="0.4"></ChartSeries>
@@ -137,7 +137,7 @@
     <CodePreview IsFullWidth="true" CodeSection="@stackingLabelCode">
     <PreviewSection>
         <SfChart @key="@_currentTheme" Title="Global Cotton Production by Country (2019–2024)" Theme="@_currentTheme">
-            <ChartTooltipSettings Enable="true" Header="${point.x}"/>
+            <ChartTooltipSettings Enable="true" Header=""/>
             <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category" Interval="1"></ChartPrimaryXAxis>
             <ChartPrimaryYAxis Interval="20"><ChartAxisLineStyle Width="0"/></ChartPrimaryYAxis>
             <ChartStackLabelSettings Visible="true"></ChartStackLabelSettings>
@@ -510,7 +510,7 @@
                         <ChartCornerRadius TopLeft="8" TopRight="8"></ChartCornerRadius>
                     </ChartSeries>
                 
-                <ChartTooltipSettings Enable="true" Header="${point.x}" Format="${point.x} : <b>${point.y}</b>" />
+                <ChartTooltipSettings Enable="true" Header="" Format="${point.x} : <b>${point.y}</b>" />
             </SfChart>
         </PreviewSection>
     </CodePreview>
@@ -669,7 +669,7 @@
         <ChartSeries DataSource=""@Data"" XName=""X"" YName=""Y2"" Name=""China"" Type=""ChartSeriesType.StackingColumn"" Fill=""#00796B"" ColumnWidth=""0.4""></ChartSeries>
         <ChartSeries DataSource=""@Data"" XName=""X"" YName=""Y3"" Name=""United States"" Type=""ChartSeriesType.StackingColumn"" Fill=""#B71C1C"" ColumnWidth=""0.4""></ChartSeries>
     
-    <ChartTooltipSettings Enable=""true"" Header=""${point.x}"" Format=""Total: ${point.tooltip}"" />
+    <ChartTooltipSettings Enable=""true"" Header="""" Format=""Total: ${point.tooltip}"" />
 </SfChart>
 
 @code {
@@ -690,7 +690,7 @@
 }";
 
     public string stackingLabelCode = @" <SfChart @key=""@_currentTheme"" Title=""Global Cotton Production by Country (2019–2024)"" Theme=""@_currentTheme"">
-            <ChartTooltipSettings Enable=""true"" Header=""${point.x}""/>
+            <ChartTooltipSettings Enable=""true"" Header=""""/>
             <ChartPrimaryXAxis ValueType=""Syncfusion.Blazor.Toolkit.ValueType.Category"" Interval=""1""></ChartPrimaryXAxis>
             <ChartPrimaryYAxis Interval=""20""><ChartAxisLineStyle Width=""0""/></ChartPrimaryYAxis>
             <ChartStackLabelSettings Visible=""true""></ChartStackLabelSettings>
@@ -1040,7 +1040,7 @@
                         <ChartCornerRadius TopLeft=""8"" TopRight=""8""></ChartCornerRadius>
                     </ChartSeries>
                 
-                <ChartTooltipSettings Enable=""true"" Header=""${point.x}"" Format=""${point.x} : <b>${point.y}</b>"" />
+                <ChartTooltipSettings Enable=""true"" Header="""" Format=""${point.x} : <b>${point.y}</b>"" />
             </SfChart>
 
 @code {
diff --git a/src/Components/Charts/Chart/Renderer/ChartLegendRenderer.cs b/src/Components/Charts/Chart/Renderer/ChartLegendRenderer.cs
index 9f99aa5..67b9054 100644
--- a/src/Components/Charts/Chart/Renderer/ChartLegendRenderer.cs
+++ b/src/Components/Charts/Chart/Renderer/ChartLegendRenderer.cs
@@ -714,7 +714,7 @@ private void UpdateHeightCollections(LegendOption legendOption, double rowCount,
         {
             int len = (int)(rowCount > 0 ? (rowCount - 1) : 0);
 
-            RowHeights?.Insert(len, Math.Max(len >= 0 && len < RowHeights.Count ? RowHeights[len] : 0, legendOption?.TextSize.Height ?? 0));
+            RowHeights?.Insert(len, Math.Max(len >= 0 && len < RowHeights.Count ? RowHeights[len] : 0, MaxItemHeight));
 
             double columnHeightsValue = ComputeColumnHeightValue(legendOption!, columnCount, padding, firstLegend);
             ColumnHeights?.Insert((int)columnCount, columnHeightsValue);
@@ -731,7 +731,7 @@ private void UpdateHeightCollections(LegendOption legendOption, double rowCount,
         private double ComputeColumnHeightValue(LegendOption legendOption, double columnCount, double padding, bool firstLegend)
         {
             int colIndex = (int)columnCount;
-            double baseHeight = (colIndex >= 0 && colIndex < ColumnHeights?.Count ? ColumnHeights[colIndex] : 0) + (legendOption?.TextSize.Height ?? 0);
+            double baseHeight = (colIndex >= 0 && colIndex < ColumnHeights?.Count ? ColumnHeights[colIndex] : 0) + MaxItemHeight;
             double additionalPadding = IsVertical
                 ? (firstLegend || LegendCollection.IndexOf(legendOption ?? null!) == 0) ? padding : ItemPadding
                 : IsTopBottomVertical
@@ -765,7 +765,7 @@ private void CalculatePagingAndFinalBounds(double rowCount, int wrapTextCount, b
             double padding = Legend?.Padding ?? 0;
             double columnHeight = (ColumnHeights?.Count > 0 ? ColumnHeights.Max() : 0) + padding;
 
-            columnHeight = Math.Max(columnHeight + (wrapTextCount > 1 ? padding : 0), MaxItemHeight + padding + padding);
+            columnHeight = Math.Max(columnHeight + (wrapTextCount > 1 ? padding : 0), (MaxItemHeight + padding) + padding);
             IsPaging = LegendBounds.Height < columnHeight && rowCount > 0;
             rowCount = IsPaging ? rowCount : 1;
 
@@ -776,7 +776,7 @@ private void CalculatePagingAndFinalBounds(double rowCount, int wrapTextCount, b
                 double rowsPerPageDenom = Math.Max(1.0, (double)RowCountPerPage - 1.0);
                 double linesPerPageDenom = Math.Max(0.0, Math.Ceiling((LegendBounds.Height - (Legend?.Padding ?? 0)) / _textHeight) + 1.0);
 
-                TotalPageCount = Math.Ceiling((rowCount / rowsPerPageDenom) + (wrapTextCount / linesPerPageDenom));
+                TotalPageCount = Math.Ceiling((rowCount / Math.Max(1, RowCountPerPage - 1)) + (wrapTextCount / Math.Max(0, Math.Ceiling((LegendBounds.Height - (Legend?.Padding ?? 0)) / _textHeight) + 1)));
             }
             else
             {
@@ -796,11 +796,7 @@ private void FinalizeLegendLocation(Rect rect, Size availableSize)
                 GetLocation(rect ?? null!, availableSize ?? null!, LegendSettings.Margin, Owner?._margin ?? null!, LegendSettings.Border, LegendSettings.Location);
             }
 
-            if (LegendSettings?.Position == LegendPosition.Custom)
-            {
-                double width = (availableSize?.Width ?? 0) - LegendSettings.Location.X - LegendSettings.Border.Width;
-                LegendBounds.Width = Math.Max(0, Math.Min(LegendBounds.Width, width));
-            }
+            LegendBounds.Width = LegendSettings?.Position == LegendPosition.Custom ? Math.Min(LegendBounds.Width, (availableSize?.Width ?? 0) - LegendSettings.Location.X - LegendSettings.Border.Width) : LegendBounds.Width;
         }
 
         /// <summary>
diff --git a/src/Components/Charts/Common/BaseTooltip/TooltipData.razor.cs b/src/Components/Charts/Common/BaseTooltip/TooltipData.razor.cs
index b3bc83c..6c7e635 100644
--- a/src/Components/Charts/Common/BaseTooltip/TooltipData.razor.cs
+++ b/src/Components/Charts/Common/BaseTooltip/TooltipData.razor.cs
@@ -71,7 +71,7 @@ private RenderFragment TemplateElements()
                 if (GivenContent is not null)
                 {
                     builder.OpenElement(seq++, "div");
-                    builder.AddAttribute(seq++, "id", "tooltip_template");
+                    builder.AddAttribute(seq++, "id", _owner?.ID + "tooltip_template");
 
                     if (_sharedTemplate)
                     {
diff --git a/src/wwwroot/scripts/chart.js b/src/wwwroot/scripts/chart.js
index dfa7d44..2aa0487 100644
--- a/src/wwwroot/scripts/chart.js
+++ b/src/wwwroot/scripts/chart.js
@@ -189,7 +189,7 @@ const SfChart = (function () {
     SfChart.prototype.getElementSize = function (id) {
         const element = document.getElementById(id);
         if (element) {
-            const tooltipTemplate = document.getElementById('tooltip_template');
+            const tooltipTemplate = document.getElementById(this.element.id + 'tooltip_template');
             if (tooltipTemplate) {
                 element.innerHTML = '';
                 element.appendChild(tooltipTemplate);
@@ -6755,6 +6755,10 @@ export function onZoomingMouseEnd(e, chart) {
     chart.userInteractionBase.disableTrackTooltip = false;
     chart.zoomToolkitBase.isReset = false;
     chart.zoomBase.zoomingModule.zoomAxes = [];
+    const zoomKitElement = getElement(chart.element.id + chart.zoomBase.zoomToolkitId);
+    if (zoomKitElement) {
+        zoomKitElement.style.visibility = 'visible';
+    }
 }
 
 export function onZoomingMouseDown(e, pageX, pageY, chart) {
@@ -7525,6 +7529,7 @@ export function removeTooltipCrosshairOnZoom(chart) {
     const axisGroup = getElement(chart.element.id + '_crosshair_axis');
     if (tooltip) {
         tooltip.remove();
+        removeHighlight(chart);
     }
     removeMarker(chart);
     if (crosshair && crosshair.getAttribute('opacity') !== '0') {