DxChartCrosshairLabel Class

Defines a crosshair label.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxChartCrosshairLabel :
    DxComplexSettingsComponent<DxChartCrosshairLabel, CrosshairLabelModel>,
    IModelProvider<ChartFontModel>

Remarks

Use the DxChartCrosshairLabel component to configure crosshair labels 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>
    </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
    • DxChartCrosshairLabel
      • DxChartFont
    • DxChartCrosshairHorizontalLine
      • DxChartCrosshairLabel
        • DxChartFont
    • DxChartCrosshairVerticalLine
      • DxChartCrosshairLabel
        • DxChartFont

Follow the steps below to show and customize crosshair labels:

1. Add a DxChartCrosshair object to the chart markup and set the DxChartCrosshair.Enabled property to true.
2. Add a DxChartCrosshairLabel object to the DxChartCrosshair component markup to configure common label settings. Enable the DxChartCrosshairLabel.Visible property to display labels.
3. Optional. Override common settings for horizontal or vertical crosshair lines.

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

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object

ComponentBase

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

DxComplexSettingsComponent<DxChartCrosshairLabel, DevExpress.Blazor.ClientComponents.Internal.CrosshairLabelModel>

DxChartCrosshairLabel