DxChartCrosshairHorizontalLine Class
Defines a horizontal crosshair line.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
Declaration
public class DxChartCrosshairHorizontalLine :
DxChartCrosshairLineBase<DxChartCrosshairHorizontalLine, CrosshairHorizontalLineModel>Remarks
Use the DxChartCrosshairHorizontalLine component to customize horizontal crosshair lines in the DxChart component.
@rendermode InteractiveServer
<DxChart Data="@DataSource"
Width="100%"
Height="500px">
<DxChartTitle Text="DevAV Sales" />
<DxChartArgumentAxis TickInterval="1">
<DxChartAxisTitle Text="Year" />
<DxChartAxisLabel Format="ChartElementFormat.Decimal()" />
</DxChartArgumentAxis>
<DxChartCrosshair Enabled="true"
Width="2"
DashStyle="ChartDashStyle.Dot"
Color="#5f368d"
Opacity="0.9">
<DxChartCrosshairLabel Visible="true"
BackgroundColor="#888">
<DxChartFont Color="white" />
</DxChartCrosshairLabel>
<DxChartCrosshairHorizontalLine Width="3"
Opacity="0.7">
<DxChartCrosshairLabel Format='ChartElementFormat.FromLdmlString("$#.0")'>
<DxChartFont Weight="700" />
</DxChartCrosshairLabel>
</DxChartCrosshairHorizontalLine>
<DxChartCrosshairVerticalLine Color="#28a745" >
<DxChartCrosshairLabel BackgroundColor="#28a745">
<DxChartFont Size="16" />
</DxChartCrosshairLabel>
</DxChartCrosshairVerticalLine>
</DxChartCrosshair>
<DxChartCommonSeries NameField="@((SalesAmountData s) => s.ProductCategory)"
ArgumentField="@((SalesAmountData s) => s.Year)"
ValueField="@((SalesAmountData s) => s.SalesAmount)">
<SeriesTemplate Context="settings">
<DxChartSplineSeries Settings="@settings" />
</SeriesTemplate>
</DxChartCommonSeries>
<DxChartLegend VerticalAlignment="VerticalEdge.Bottom"
Position="RelativePosition.Outside" />
<DxChartTooltip Enabled="true">
<div style="margin: 0.75rem">
<div>
@($"{context.Point.SeriesName}: ${context.Point.Value}K")
</div>
</div>
</DxChartTooltip>
</DxChart>
@code {
IEnumerable<SalesAmountData> DataSource = Enumerable.Empty<SalesAmountData>();
protected override void OnInitialized() {
DataSource = GenerateData();
}
}
Show Nested Component Structure
- DxChart<T>
- DxChartCrosshair
DxChartCrosshairHorizontalLine
- DxChartCrosshair
Refer to the DxChartCrosshair class description for more information and examples.
Inheritance
Object
ComponentBase
DxSettingsComponent<DevExpress.Blazor.ClientComponents.Internal.CrosshairHorizontalLineModel>
DxComplexSettingsComponent<DxChartCrosshairHorizontalLine, DevExpress.Blazor.ClientComponents.Internal.CrosshairHorizontalLineModel>
DxChartCrosshairLineBase<DxChartCrosshairHorizontalLine, DevExpress.Blazor.ClientComponents.Internal.CrosshairHorizontalLineModel>
DxChartCrosshairHorizontalLine
See Also