DxChartCrosshair Class
Contains settings for DxChart crosshairs.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
Declaration
public class DxChartCrosshair :
DxChartCrosshairLineBase<DxChartCrosshair, CrosshairModel>,
IModelProvider<CrosshairHorizontalLineModel>,
IModelProvider<CrosshairVerticalLineModel>Remarks
The DxChart<T> component supports crosshairs – vertical and horizontal lines centered on a data point that help precisely identify series point values. When enabled, the crosshair follows the cursor and snaps to the nearest series point.
Enable Crosshairs
Follow the steps below to enable the crosshair functionality:
- Add a
<DxChartCrosshair>object to the chart markup. - Set the DxChartCrosshair.Enabled property to
true.
@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" />
<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();
}
}
Common Settings: Vertical and Horizontal Crosshair Lines
You can configure common crosshair settings at the DxChartCrosshair component level. The following properties are available:
- Color | Opacity
- Specify the line color and opacity.
- Width | DashStyle
- Specify the line width and style.
<DxChart Data="@DataSource"
Width="100%"
Height="500px">
@* ... *@
<DxChartCrosshair Enabled="true"
Width="2"
DashStyle="ChartDashStyle.Dot"
Color="#5f368d"
Opacity="0.9" />
</DxChart>
Line Labels
Add a DxChartCrosshairLabel object to the <DxChartCrosshair> component markup and enable the DxChartCrosshairLabel.Visible property to display crosshair labels.
Use the following properties to customize labels:
- BackgroundColor
- Specifies the label background color.
- Format
- Specifies the text format in crosshair labels.
You can also add a DxChartFont object to the DxChartCrosshairLabel component markup to configure label font settings.
<DxChart Data="@DataSource"
Width="100%"
Height="500px">
@* ... *@
<DxChartCrosshair Enabled="true"
Width="2"
DashStyle="ChartDashStyle.Dot"
Color="#5f368d"
Opacity="0.9">
<DxChartCrosshairLabel Visible="true"
BackgroundColor="#888">
<DxChartFont Color="white" />
</DxChartCrosshairLabel>
</DxChartCrosshair>
</DxChart>
Individual Line Settings
Add a DxChartCrosshairHorizontalLine or DxChartCrosshairVerticalLine object to the <DxChartCrosshair> component markup to override common settings for horizontal or vertical crosshair lines.
You can also use the DxChartCrosshairHorizontalLine.Visible or DxChartCrosshairVerticalLine.Visible property to specify whether hozirontal or vertical lines are visible.
<DxChart Data="@DataSource"
Width="100%"
Height="500px">
@* ... *@
<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>
</DxChart>