Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxChartCrosshairVerticalLine Class

Defines a vertical crosshair line.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxChartCrosshairVerticalLine :
    DxChartCrosshairLineBase<DxChartCrosshairVerticalLine, CrosshairVerticalLineModel>

#Remarks

Use the DxChartCrosshairVerticalLine component to customize vertical crosshair lines in the DxChart component.

DxChart - Individual Crosshair Settings

@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

Refer to the DxChartCrosshair class description for more information and examples.

#Inheritance

Object
ComponentBase
DxSettingsComponent<DevExpress.Blazor.ClientComponents.Internal.CrosshairVerticalLineModel>
DxComplexSettingsComponent<DxChartCrosshairVerticalLine, DevExpress.Blazor.ClientComponents.Internal.CrosshairVerticalLineModel>
DxChartCrosshairLineBase<DxChartCrosshairVerticalLine, DevExpress.Blazor.ClientComponents.Internal.CrosshairVerticalLineModel>
DxChartCrosshairVerticalLine
See Also