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

@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 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)
    };
}