How to align the first tick line with the start of the axis line in the Blazor Linear Gauge?
The center of the first major tick line will be considered the start of the axis line in the Linear Gauge component. This behavior is common in many of the Linear Gauges available in the market. However, the first tick line in Blazor Linear Gauge can be aligned with the start of the axis line using a JS interop technique. This article will show you how to align the first tick line with the start of the axis line.
We must create a JavaScript method (customizePath) to calculate the position of the first major tick line. This JavaScript method must be called in the Loaded event of the Linear Gauge via a JS interop method to align the first major tick line with the axis line.
The code sample below demonstrates how to align the tick line with the axis line in the Blazor Linear Gauge.
Index.razor
@using Syncfusion.Blazor.LinearGauge
@inject IJSRuntime JSRuntime
<div>
<SfLinearGauge ID="Linear" Title="Outside" Orientation="Orientation.Horizontal">
<LinearGaugeEvents Loaded="Loaded"></LinearGaugeEvents>
<LinearGaugeTitleStyle FontWeight="499" FontFamily="inherit" />
<LinearGaugeAxes>
<LinearGaugeAxis Minimum="0" Maximum="100" OpposedPosition="true">
<LinearGaugeLine Width="2"/>
<LinearGaugeMajorTicks Interval="20" Height="7" Width="2" />
<LinearGaugeMinorTicks Interval="10" Height="3" Width="2" />
<LinearGaugeAxisLabelStyle>
<LinearGaugeAxisLabelFont FontFamily="inherit" />
</LinearGaugeAxisLabelStyle>
<LinearGaugePointers>
<LinearGaugePointer PointerValue="70" Placement="Placement.Near" Type="Point.Bar" Position="Position.Outside" Color="#0074E3" Width="25" Height="25" AnimationDuration="0" />
</LinearGaugePointers>
</LinearGaugeAxis>
</LinearGaugeAxes>
</SfLinearGauge>
</div>
@code{
public async Task Loaded(LoadedEventArgs args)
{
await JSRuntime.InvokeVoidAsync("customizePath");
}
}
_Host.cshtml:
<script>
function customizePath() {
var pathLineElement = document.getElementById("Linear_AxisLine_0");
var pathBarElement = document.getElementById("Linear_AxisIndex_0_Bar_0");
var majorTickLineElement = document.getElementById("Linear_MinorTicksLine_0");
var majorTickLineWidth = majorTickLineElement.getAttribute("stroke-width")
var tickWidth = parseInt(majorTickLineWidth) / 4;
if (pathLineElement) {
var linePath = pathLineElement.getAttribute("d");
var parts = linePath.split(/\s+/);
var lineX = parts[0].split('M')[1] - tickWidth;
parts[0] = "M" + lineX.toString();
for (var i = 0; i < parts.length; i++) {
if (parts[i] === "L" && parts[i + 1] !== undefined) {
var x = parseFloat(parts[i + 1]);
x = x + tickWidth;
parts[i + 1] = x.toString();
}
}
var modifiedPathData = parts.join(" ");
pathLineElement.setAttribute("d", modifiedPathData)
var barPath = pathBarElement.getAttribute("x");
var xValue = parseFloat(barPath);
var barXValue = xValue - tickWidth;
pathBarElement.setAttribute("x", barXValue);
}
}
</script>
The following screenshots illustrate the output of the above code snippet.
Screenshot of the Linear Gauge with a mismatch between the first tick line and the axis line:
Screenshot after repositioning the first tick line in relation to the axis line:
Conclusion
I hope you enjoyed learning how to align the first tick line with the start of the axis line in the Blazor Linear Gauge.
You can refer to our Blazor Linear Gauge feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Linear Gauge example to understand how to create and visualize data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
