DxChartCrosshair Class

Contains settings for DxChart crosshairs.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

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.

Run Demo: Chart - Crosshair

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.

Razor
DataSource

razor

@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 class="m-3">
            <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();
    }
}

csharp

public class SalesAmountData {
    public int Year { get; init; }
    public string ProductCategory { get; init; }
    public double SalesAmount { get; init; }
    public SalesAmountData(int year, string productCategory, double salesAmount) {
        Year = year;
        ProductCategory = productCategory;
        SalesAmount = salesAmount;
    }
}

public List<SalesAmountData> GenerateData() {
    return new List<SalesAmountData>() {
        new SalesAmountData(2015, "Cameras", 260.0),
        new SalesAmountData(2016, "Cameras", 323.4),
        new SalesAmountData(2017, "Cameras", 252.7),
        new SalesAmountData(2018, "Cameras", 457.0),
        new SalesAmountData(2019, "Cameras", 201.4),
        new SalesAmountData(2020, "Cameras", 93.9),
        new SalesAmountData(2021, "Cameras", 104.9),
        new SalesAmountData(2022, "Cameras", 65.5),
        new SalesAmountData(2023, "Cameras", 226.0),
        new SalesAmountData(2015, "Cell Phones", 430.0),
        new SalesAmountData(2016, "Cell Phones", 162.1),
        new SalesAmountData(2017, "Cell Phones", 332.0),
        new SalesAmountData(2018, "Cell Phones", 216.4),
        new SalesAmountData(2019, "Cell Phones", 174.2),
        new SalesAmountData(2020, "Cell Phones", 411.0),
        new SalesAmountData(2021, "Cell Phones", 494.1),
        new SalesAmountData(2022, "Cell Phones", 139.4),
        new SalesAmountData(2023, "Cell Phones", 417.0),
        new SalesAmountData(2015, "Computers", 496.5),
        new SalesAmountData(2016, "Computers", 186.9),
        new SalesAmountData(2017, "Computers", 53.2),
        new SalesAmountData(2018, "Computers", 181.1),
        new SalesAmountData(2019, "Computers", 230.0),
        new SalesAmountData(2020, "Computers", 181.5),
        new SalesAmountData(2021, "Computers", 255.2),
        new SalesAmountData(2022, "Computers", 328.3),
        new SalesAmountData(2023, "Computers", 281.4),
        new SalesAmountData(2015, "TV, Audio", 348.1),
        new SalesAmountData(2016, "TV, Audio", 241.3),
        new SalesAmountData(2017, "TV, Audio", 305.5),
        new SalesAmountData(2018, "TV, Audio", 486.3),
        new SalesAmountData(2019, "TV, Audio", 252.4),
        new SalesAmountData(2020, "TV, Audio", 452.7),
        new SalesAmountData(2021, "TV, Audio", 464.9),
        new SalesAmountData(2022, "TV, Audio", 306.7),
        new SalesAmountData(2023, "TV, Audio", 70.3),
        new SalesAmountData(2015, "Vehicle Electronics", 218.5),
        new SalesAmountData(2016, "Vehicle Electronics", 132.6),
        new SalesAmountData(2017, "Vehicle Electronics", 120.2),
        new SalesAmountData(2018, "Vehicle Electronics", 95.0),
        new SalesAmountData(2019, "Vehicle Electronics", 439.8),
        new SalesAmountData(2020, "Vehicle Electronics", 114.3),
        new SalesAmountData(2021, "Vehicle Electronics", 59.3),
        new SalesAmountData(2022, "Vehicle Electronics", 374.9),
        new SalesAmountData(2023, "Vehicle Electronics", 145.6)
    };
}

Show Nested Component Structure

DxChart<T>
- DxChartCrosshair

Common Settings: Vertical and Horizontal Crosshair Lines

You can configure common crosshair settings at the DxChartCrosshair component level. The following properties are available:

Color | OpacitySpecify the line color and opacity.Width | DashStyleSpecify the line width and style.

razor

<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:

BackgroundColorSpecifies the label background color.FormatSpecifies the text format in crosshair labels.

You can also add a DxChartFont object to the DxChartCrosshairLabel component markup to configure label font settings.

razor

<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.

razor

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

Implements

Inheritance

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