Links

Blazor-ApexCharts

Scatter chart

Page.razor

<ApexChart
    @ref=chart
    Options=chartOptions
    TItem="Item"
    Title="Items">

    <ApexPointSeries
        TItem="Item"
        Items="items"
        SeriesType="SeriesType.Scatter"
        XValue="@(x => x.Datetime.ToString("d MMM yy"))"
        YValue="@(x => x.Price)"
        OrderByDescending="@(x => x.X)"
        Color="White"
        PointColor="@(x => x.Valid ? "Green" : "Red")"
        ShowDataLabels />
</ApexChart>

Page.razor.cs

private ApexChart<TransactionDataResponse> chart = default!;

private readonly ApexChartOptions<TransactionDataResponse> chartOptions = new()
{
    Theme = new Theme { Mode = Mode.Dark },
    NoData = new NoData { Text = "Loading ..." },
    DataLabels = new DataLabels
    {
        OffsetY = -10,
        Background = new DataLabelsBackground { Enabled = false }
    }
};

Add the package

dotnet add package Blazor-ApexCharts

Pages/_Host.cshtml

<!-- <script src="_framework/blazor.server.js"></script> -->
<script src="_content/Blazor-ApexCharts/js/apex-charts.min.js"></script>
<script src="_content/Blazor-ApexCharts/js/blazor-apex-charts.js"></script>