DxChartCrosshairVerticalLine Class

Defines a vertical crosshair line.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxChartCrosshairVerticalLine :
    DxChartCrosshairLineBase<DxChartCrosshairVerticalLine, CrosshairVerticalLineModel>

Remarks

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

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"
                      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();
    }
}

DataSource

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
    • DxChartCrosshairVerticalLine
      • DxChartCrosshairLabel
        • DxChartFont

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

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object

ComponentBase

DxSettingsComponent<DevExpress.Blazor.ClientComponents.Internal.CrosshairVerticalLineModel>

DxComplexSettingsComponent<DxChartCrosshairVerticalLine, DevExpress.Blazor.ClientComponents.Internal.CrosshairVerticalLineModel>

DxChartCrosshairLineBase<DxChartCrosshairVerticalLine, DevExpress.Blazor.ClientComponents.Internal.CrosshairVerticalLineModel>

DxChartCrosshairVerticalLine