diff --git a/knowledge-base/chart-axis-labels-units.md b/knowledge-base/chart-axis-labels-units.md new file mode 100644 index 000000000..d51dbd847 --- /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 + + + + + + + + +
ProductCharts for Blazor
+ +## 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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + Toggle Units (Currently: @(IsMetric ? "Metric" : "Inches")) + + + + +@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 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)