From 65f5607ad4b5128d8b96cb797d2ae0ef2e9143b0 Mon Sep 17 00:00:00 2001
From: KB Bot <kb-bot@telerik.com>
Date: Thu, 19 Jun 2025 14:07:49 +0000
Subject: [PATCH 1/2] Added new kb article chart-axis-labels-units

---
 knowledge-base/chart-axis-labels-units.md | 112 ++++++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 knowledge-base/chart-axis-labels-units.md

diff --git a/knowledge-base/chart-axis-labels-units.md b/knowledge-base/chart-axis-labels-units.md
new file mode 100644
index 000000000..4578eb900
--- /dev/null
+++ b/knowledge-base/chart-axis-labels-units.md
@@ -0,0 +1,112 @@
+---
+title: How to Conditionally Change Axis Labels Units
+description: Learn how to format and convert the Y-Axis labels in Charts for Blazor to display inch or metric values based on user preference.
+type: how-to
+page_title: Customizing Y-Axis Labels in Charts for Blazor
+meta_title: Customizing Y-Axis Labels in Charts for Blazor
+slug: chart-kb-axis-labels-units
+tags: blazor, charts, axis, labels, template
+res_type: kb
+ticketid: 1690815
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>Charts for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+## Description
+
+I want to format and convert the Y-Axis labels to display either metric (mm) or imperial (inches) values based on user preference.
+
+## Solution
+
+Use the [`Template` parameter of the `ChartYAxisLabels`](slug:components/chart/label-template-format) to apply custom formatting and conversion logic. Below is an example implementation:
+
+````RAZOR
+<TelerikChart Height="550px" Width="100%">
+    <ChartTitle Text="Charge current vs. charge time" />
+    <ChartTooltip Visible="true" Shared="true" />
+    <ChartLegend Position="ChartLegendPosition.Bottom" />
+
+    <ChartSeriesItems>
+        <ChartSeries Type="ChartSeriesType.ScatterLine"
+                     Style="ChartSeriesStyle.Smooth"
+                     Name="Example Series"
+                     Color="black"
+                     Data="@Series1Data"
+                     XField="@nameof(ModelData.X)"
+                     YField="@nameof(ModelData.Y)">
+            <ChartSeriesMarkers Visible="true" Size="6" Type="ChartSeriesMarkersType.Circle" />
+        </ChartSeries>
+    </ChartSeriesItems>
+
+    <ChartXAxes>
+        <ChartXAxis Max="100" MajorUnit="10">
+            <ChartXAxisTitle Text="Time (minutes)" />
+            <ChartXAxisLabels Format="{0}m" />
+        </ChartXAxis>
+    </ChartXAxes>
+
+    <ChartYAxes>
+        <ChartYAxis>
+            <ChartYAxisTitle Text="@(IsMetric ? "Charge (mm)" : "Charge (in)")" />
+            <ChartYAxisLabels Template="@YAxisLabelTemplate" />
+        </ChartYAxis>
+    </ChartYAxes>
+</TelerikChart>
+
+<TelerikButton OnClick="@ToggleUnits" Class="mt-4">
+    Toggle Units (Currently: @(IsMetric ? "Metric" : "Inches"))
+</TelerikButton>
+
+<script suppress-error="BL9992">
+    function yAxisLabelMetric(context) {
+        return context.value.toFixed(2) + " mm";
+    }
+
+    function yAxisLabelInches(context) {
+        return (context.value / 25.4).toFixed(2) + " in";
+    }
+</script>
+
+@code {
+    private bool IsMetric = true;
+    private string YAxisLabelTemplate => IsMetric ? "yAxisLabelMetric" : "yAxisLabelInches";
+
+    private void ToggleUnits()
+    {
+        IsMetric = !IsMetric;
+    }
+
+    public class ModelData
+    {
+        public int X { get; set; }
+        public int Y { get; set; }
+    }
+
+    public List<ModelData> Series1Data = new()
+    {
+        new ModelData() { X = 10, Y = 10 },
+        new ModelData() { X = 15, Y = 20 },
+        new ModelData() { X = 20, Y = 25 },
+        new ModelData() { X = 32, Y = 40 },
+        new ModelData() { X = 43, Y = 50 },
+        new ModelData() { X = 55, Y = 60 },
+        new ModelData() { X = 60, Y = 70 },
+        new ModelData() { X = 70, Y = 80 },
+        new ModelData() { X = 90, Y = 100 },
+    };
+}
+````
+
+## See Also
+
+* [Chart Overview](slug:components/chart/overview)
+* [ChartYAxisLabels Documentation](slug:components/chart/label-template-format)

From cc3885a2d69bae54448a89d3424512c6c5036da3 Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com>
Date: Fri, 20 Jun 2025 15:58:52 +0300
Subject: [PATCH 2/2] Update knowledge-base/chart-axis-labels-units.md

Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
---
 knowledge-base/chart-axis-labels-units.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/chart-axis-labels-units.md b/knowledge-base/chart-axis-labels-units.md
index 4578eb900..d51dbd847 100644
--- a/knowledge-base/chart-axis-labels-units.md
+++ b/knowledge-base/chart-axis-labels-units.md
@@ -30,7 +30,7 @@ I want to format and convert the Y-Axis labels to display either metric (mm) or
 Use the [`Template` parameter of the `ChartYAxisLabels`](slug:components/chart/label-template-format) to apply custom formatting and conversion logic. Below is an example implementation:
 
 ````RAZOR
-<TelerikChart Height="550px" Width="100%">
+<TelerikChart Height="380px" Width="100%">
     <ChartTitle Text="Charge current vs. charge time" />
     <ChartTooltip Visible="true" Shared="true" />
     <ChartLegend Position="ChartLegendPosition.Bottom" />