Skip to main content
All docs
V25.1
  • DxChartCrosshair Class

    Contains settings for DxChart crosshairs.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.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.

    DxChart - Crosshairs

    Run Demo: Chart - Crosshair

    Enable Crosshairs

    Follow the steps below to enable the crosshair functionality:

    1. Add a <DxChartCrosshair> object to the chart markup.
    2. 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 - Crosshair Configuration

    <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 - Crosshair Labels

    <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 - Individual Crosshair 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>
            <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>
    

    Inheritance

    Object
    ComponentBase
    DxSettingsComponent<DevExpress.Blazor.ClientComponents.Internal.CrosshairModel>
    DxComplexSettingsComponent<DxChartCrosshair, DevExpress.Blazor.ClientComponents.Internal.CrosshairModel>
    DxChartCrosshairLineBase<DxChartCrosshair, DevExpress.Blazor.ClientComponents.Internal.CrosshairModel>
    DxChartCrosshair
    See Also