From e984b9342d44940ef511386ffa863cb66971784d Mon Sep 17 00:00:00 2001
From: KB Bot <kb-bot@telerik.com>
Date: Mon, 21 Oct 2024 09:24:00 +0000
Subject: [PATCH 1/2] Added new kb article chart-remove-excess-whitespace

---
 .../chart-remove-excess-whitespace.md         | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 knowledge-base/chart-remove-excess-whitespace.md

diff --git a/knowledge-base/chart-remove-excess-whitespace.md b/knowledge-base/chart-remove-excess-whitespace.md
new file mode 100644
index 0000000000..fda1393035
--- /dev/null
+++ b/knowledge-base/chart-remove-excess-whitespace.md
@@ -0,0 +1,87 @@
+---
+title: How to Reduce the Excessive WhiteSpace Around the Chart
+description: Learn how to adjust the padding and legend position of a Chart and remove unnecessary whitespace.
+type: how-to
+page_title: How to Reduce the Excessive WhiteSpace Around the Chart
+slug: chart-kb-remove-excess-whitespace
+tags: chart, padding
+res_type: kb
+ticketid: 1663179, 1559824
+---
+
+## Environment
+
+<table>
+	<tbody>
+		<tr>
+			<td>Product</td>
+			<td>Chart for Blazor</td>
+		</tr>
+	</tbody>
+</table>
+
+## Description
+
+This KB article answers the following questions:
+
+- How to adjust the padding of a Chart in Blazor?
+- How to reduce whitespace around the Chart that is within a Telerik Card?
+- How to make the Chart more compact?
+
+## Solution
+
+To reduce the whitespace around a Chart, use the `Padding` parameter of the ChartSeries.
+
+````CSHTML
+<TelerikCard Width="330px">
+    <CardHeader>
+        <CardTitle>Simple Pie Chart</CardTitle>
+    </CardHeader>
+    <CardBody>
+        <TelerikChart Height="300px">
+            <ChartSeriesItems>
+                <ChartSeries Type="ChartSeriesType.Pie"
+                             Data="@pieData"
+                             Field="@nameof(MyPieChartModel.SegmentValue)"
+                             CategoryField="@nameof(MyPieChartModel.SegmentName)"
+                             Padding="5">
+                </ChartSeries>
+            </ChartSeriesItems>
+            <ChartLegend Position="ChartLegendPosition.Bottom" Width="300">
+            </ChartLegend>
+        </TelerikChart>
+    </CardBody>
+</TelerikCard>
+
+@code {
+
+    private List<MyPieChartModel> pieData = new List<MyPieChartModel>
+    {
+        new MyPieChartModel
+        {
+            SegmentName = "Product 1",
+            SegmentValue = 2
+        },
+        new MyPieChartModel
+        {
+            SegmentName = "Product 2",
+            SegmentValue = 3
+        },
+        new MyPieChartModel
+        {
+            SegmentName = "Product 3",
+            SegmentValue = 4
+        }
+    };
+    public class MyPieChartModel
+    {
+        public string SegmentName { get; set; }
+        public double SegmentValue { get; set; }
+    }
+}
+````
+
+## See Also
+
+- [ChartSeries API Documentation](https://docs.telerik.com/blazor-ui/api/telerik.blazor.components.chartseries)
+- [Chart for Blazor Overview]({%slug components/chart/overview%})

From 9d47ab35e8eb8f6e14ce9433cd1f1da565ffc038 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Tue, 29 Oct 2024 15:06:23 +0200
Subject: [PATCH 2/2] kb(Chart): example polish

---
 knowledge-base/chart-remove-excess-whitespace.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/knowledge-base/chart-remove-excess-whitespace.md b/knowledge-base/chart-remove-excess-whitespace.md
index fda1393035..4c8948cf9a 100644
--- a/knowledge-base/chart-remove-excess-whitespace.md
+++ b/knowledge-base/chart-remove-excess-whitespace.md
@@ -1,8 +1,8 @@
 ---
-title: How to Reduce the Excessive WhiteSpace Around the Chart
-description: Learn how to adjust the padding and legend position of a Chart and remove unnecessary whitespace.
+title: How to Reduce the Excessive Whitespace Around the Chart
+description: Learn how to adjust the padding and legend position of a Chart and remove unnecessary white space.
 type: how-to
-page_title: How to Reduce the Excessive WhiteSpace Around the Chart
+page_title: How to Reduce the Excessive Whitespace Around the Chart
 slug: chart-kb-remove-excess-whitespace
 tags: chart, padding
 res_type: kb
@@ -25,7 +25,7 @@ ticketid: 1663179, 1559824
 This KB article answers the following questions:
 
 - How to adjust the padding of a Chart in Blazor?
-- How to reduce whitespace around the Chart that is within a Telerik Card?
+- How to reduce white space around the Chart that is within a Telerik Card?
 - How to make the Chart more compact?
 
 ## Solution
@@ -54,7 +54,6 @@ To reduce the whitespace around a Chart, use the `Padding` parameter of the Char
 </TelerikCard>
 
 @code {
-
     private List<MyPieChartModel> pieData = new List<MyPieChartModel>
     {
         new MyPieChartModel
@@ -73,6 +72,7 @@ To reduce the whitespace around a Chart, use the `Padding` parameter of the Char
             SegmentValue = 4
         }
     };
+
     public class MyPieChartModel
     {
         public string SegmentName { get; set; }