blazor-devexpress-dot-blazor-182b1897.md
Defines a vertical crosshair line.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public class DxChartCrosshairVerticalLine :
DxChartCrosshairLineBase<DxChartCrosshairVerticalLine, CrosshairVerticalLineModel>
Use the DxChartCrosshairVerticalLine component to customize vertical crosshair lines in the DxChart component.
@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 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();
}
}
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
DxChartCrosshairVerticalLine
Refer to the DxChartCrosshair class description for additional information and examples.
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