Skip to content

Merge gauge-width-3376 into production #3379

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dimodi merged 2 commits into from
Dec 2, 2025
Merged

Merge gauge-width-3376 into production #3379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0b5425d
kb(LinearGauge): Add KB for consistent widths
dimodi Dec 2, 2025
3a175bb
polishing
dimodi Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions components/gauges/linear/labels.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ You can customize the appearance of the labels rendered on the [scale](slug:line

* [Additional Customization](#additional-customization)

The LinearGauge scale width decreases when the `Min` and `Max` label length increases. See how to [define the same LinearGauge scale widths with different `Min` and `Max` values in multiple Gauge instances](slug:lineargauge-kb-align-gauge-widths-with-different-min-max).

## Format

The `Format` (`string`) parameter allows you to customize the rendering of the labels by using the <a href="https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings" target="_blank">standard numeric format strings</a>. You can set the values of the labels to showcase, for example, currency, percentage, and so on.
Expand Down
6 changes: 3 additions & 3 deletions components/gauges/linear/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@ The ranges are used to visually distinguish particular values on the scale. [Rea
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
| Parameter | Type and Default Value | Description |
| --- | --- | --- |
| `Class` | `string` | Renders a custom CSS class to the `<div class="k-lineargauge">` element. |
| `Width` | `string` | Controls the width of the Linear Gauge. |
| `Height` | `string` | Controls the height of the Linear Gauge. |
| `Class` | `string` | A custom CSS class for the `<div class="k-lineargauge">` element. |
| `Width` | `string` | The width of the Linear Gauge. The [scale](slug:linear-gauge-scale) width is smaller and [depends on the length of its `Min` and `Max` values](slug:lineargauge-kb-align-gauge-widths-with-different-min-max). |
| `Height` | `string` | The height of the Linear Gauge. |
| `Transitions` | `bool?` | Controls if the Linear Gauge uses animations for its value changes. |
| `RenderAs` | `RenderingMode?` <br /> (`SVG`) | Controls if the gauge renders as `SVG` or `Canvas`. |

Expand Down
258 changes: 258 additions & 0 deletions knowledge-base/lineargauge-align-gauges-with-different-min-max.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,258 @@
---
title: LinearGauge Scale Widths Are Different
description: Learn how to define consistent scale widths for Telerik Linear Gauges for Blazor, when the components are using different Min and Max values.
type: troubleshooting
page_title: How to Fix Different LinearGauge Scale Widths
slug: lineargauge-kb-align-gauge-widths-with-different-min-max
tags: blazor, gauge, lineargauge
ticketid: 1704384
res_type: kb
---

## Environment

<table>
<tbody>
<tr>
<td>Product</td>
<td>LinearGauge for Blazor</td>
</tr>
</tbody>
</table>

## Description

I am using several `<TelerikLinearGauge>` instances in a Blazor app. They display on multiple lines and need to be aligned.
The `Min` and `Max` values are different and set dynamically at runtime.
Although the Gauge `Width` parameters have the same value, the Gauge scale widths are different.

## Cause

The LinearGauge `Width` parameter affects the total width of the component. However, the scale width decreases when the length of the `Min` and `Max` labels increases.

## Solution

To achieve consistent width of multiple LinearGauges, set larger `Width` to the instances that have longer `Min` and `Max` labels.

1. Apply `monospace` font family to the Gauge labels (`div.k-gauge text`).
1. Calculate the Linear Gauge `Width`, based on the string length of the `Min` and `Max` values. Add 3px for each additional `Min` or `Max` digit.
1. Make sure that `MajorUnit` and `MinorUnit` are divisors of the difference between `Min` and `Max`. Otherwise the Gauge scale may not be consistent with the set component `Width`.

>caption Align linear Gauges with different Min and Max values

````RAZOR
<div class="example-container">

Width Correction Multiplier:
<TelerikNumericTextBox @bind-Value="@WidthMultiplier"
Min="@(0.1m)" Max="@(10m)"
Width="80px" />

<TelerikButton OnClick="@RefreshGauges"
ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Refresh Gauges to Apply Changes</TelerikButton>

<br />

Gauge Widths:
@($"{GetGaugeWidth(BaseWidth, GaugeMin1, GaugeMax1)}px"),
@($"{GetGaugeWidth(BaseWidth, GaugeMin2, GaugeMax2)}px"),
@($"{GetGaugeWidth(BaseWidth, GaugeMin3, GaugeMax3)}px")
<br />
<strong>For proper alignment, the Gauge widths (yellow) must be smaller than the container widths (green).</strong>
<br /><br />

<div>
Min: <TelerikNumericTextBox @bind-Value="@GaugeMin1" Width="120px" Min="0" Max="1_000_000" />
Max: <TelerikNumericTextBox @bind-Value="@GaugeMax1" Width="120px" Min="0" Max="1_000_000" />
MinorUnit: @GetGaugeMinorUnit(GaugeMin1, GaugeMax1) |
MajorUnit: @GetGaugeMajorUnit(GaugeMin1, GaugeMax1)
</div>

<div class="gauge-container">
<TelerikLinearGauge @ref="@LinearGaugeRef1"
Width="@($"{GetGaugeWidth(BaseWidth, GaugeMin1, GaugeMax1)}px")"
Height="60px">
<LinearGaugeScales>
<LinearGaugeScale Min="@GaugeMin1"
Max="@GaugeMax1"
MinorUnit="@GetGaugeMinorUnit(GaugeMin1, GaugeMax1)"
MajorUnit="@GetGaugeMajorUnit(GaugeMin1, GaugeMax1)"
Vertical="false">
</LinearGaugeScale>
</LinearGaugeScales>
<LinearGaugePointers>
<LinearGaugePointer Value="@(GaugeMin1 + (GaugeMax1 - GaugeMin1) / 6)"></LinearGaugePointer>
</LinearGaugePointers>
</TelerikLinearGauge>
</div>

<div>
Min: <TelerikNumericTextBox @bind-Value="@GaugeMin2" Width="120px" Min="0" Max="1_000_000" />
Max: <TelerikNumericTextBox @bind-Value="@GaugeMax2" Width="120px" Min="0" Max="1_000_000" />
MinorUnit: @GetGaugeMinorUnit(GaugeMin2, GaugeMax2) |
MajorUnit: @GetGaugeMajorUnit(GaugeMin2, GaugeMax2)
</div>

<div class="gauge-container">
<TelerikLinearGauge @ref="@LinearGaugeRef2"
Width="@($"{GetGaugeWidth(BaseWidth, GaugeMin2, GaugeMax2)}px")"
Height="60px">
<LinearGaugeScales>
<LinearGaugeScale Min="@GaugeMin2"
Max="@GaugeMax2"
MinorUnit="@GetGaugeMinorUnit(GaugeMin2, GaugeMax2)"
MajorUnit="@GetGaugeMajorUnit(GaugeMin2, GaugeMax2)"
Vertical="false">
</LinearGaugeScale>
</LinearGaugeScales>
<LinearGaugePointers>
<LinearGaugePointer Value="@(GaugeMin2 + (GaugeMax2 - GaugeMin2) / 3)"></LinearGaugePointer>
</LinearGaugePointers>
</TelerikLinearGauge>
</div>

<div>
Min: <TelerikNumericTextBox @bind-Value="@GaugeMin3" Width="120px" Min="0" Max="1_000_000" />
Max: <TelerikNumericTextBox @bind-Value="@GaugeMax3" Width="120px" Min="0" Max="1_000_000" />
MinorUnit: @GetGaugeMinorUnit(GaugeMin3, GaugeMax3) |
MajorUnit: @GetGaugeMajorUnit(GaugeMin3, GaugeMax3)
</div>

<div class="gauge-container">
<TelerikLinearGauge @ref="@LinearGaugeRef3"
Width="@($"{GetGaugeWidth(BaseWidth, GaugeMin3, GaugeMax3)}px")"
Height="60px">
<LinearGaugeScales>
<LinearGaugeScale Min="@GaugeMin3"
Max="@GaugeMax3"
MinorUnit="@GetGaugeMinorUnit(GaugeMin3, GaugeMax3)"
MajorUnit="@GetGaugeMajorUnit(GaugeMin3, GaugeMax3)"
Vertical="false">
</LinearGaugeScale>
</LinearGaugeScales>
<LinearGaugePointers>
<LinearGaugePointer Value="@(GaugeMin3 + (GaugeMax3 - GaugeMin3) / 2)"></LinearGaugePointer>
</LinearGaugePointers>
</TelerikLinearGauge>
</div>

<div class="alignment-checker"></div>

</div>

<style>
/* Use monospace font for easier and consistent width adjustments. */
div.k-gauge text {
font-family: monospace !important;
}

.example-container {
position: relative;
}
.gauge-container {
display: flex;
justify-content: center;
width: 600px;
background: lime;
}
.alignment-checker {
position: absolute;
top: 125px;
left: 105px;
width: 390px;
height: 230px;
border: solid red;
border-width: 0 1px;
}
div.k-gauge {
background: yellow;
}
</style>

@code {
#nullable enable

private int BaseWidth { get; set; } = 400;
private decimal WidthMultiplier { get; set; } = 3m;

private TelerikLinearGauge? LinearGaugeRef1 { get; set; }
private int GaugeMin1 { get; set; } = 0;
private int GaugeMax1 { get; set; } = 50;

private TelerikLinearGauge? LinearGaugeRef2 { get; set; }
private int GaugeMin2 { get; set; } = 150;
private int GaugeMax2 { get; set; } = 300;

private TelerikLinearGauge? LinearGaugeRef3 { get; set; }
private int GaugeMin3 { get; set; } = 10000;
private int GaugeMax3 { get; set; } = 11000;

private void RefreshGauges()
{
LinearGaugeRef1?.Refresh();
LinearGaugeRef2?.Refresh();
LinearGaugeRef3?.Refresh();
}

private string GetGaugeWidth(int baseWidth, int min, int max)
{
int correction = string.Concat(min.ToString(), max.ToString()).Length;
decimal width = baseWidth + (WidthMultiplier * correction);
return width.ToString().Split(",")[0];
}

private int GetGaugeMajorUnit(int min, int max)
{
if (max <= min)
{
return 1;
}

int diff = max - min;
int divisor = Convert.ToInt32(Math.Ceiling((decimal)diff / 5));
while (divisor >= 1)
{
if (diff % divisor == 0)
{
break;
}
else
{
divisor -= (diff.ToString().Length - 1);
}
}

return divisor;
}

private int GetGaugeMinorUnit(int min, int max)
{
if (max <= min)
{
return 1;
}

int majorUnit = GetGaugeMajorUnit(min, max);
int divisor = majorUnit / 10;
while (divisor >= 1)
{
if (majorUnit % divisor == 0)
{
break;
}
else
{
divisor -= 1;
}
}

return divisor;
}
}
````

## See Also

* [Linear Gauge Overview](slug:linear-gauge-overview)
* [Linear Gauge Scale](slug:linear-gauge-scale)
* [Linear Gauge Labels](slug:linear-gauge-labels)