Links

Blazor-ApexCharts

Scatter chart

Page.razor

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

    <ApexPointSeries
        Name="Serie name"
        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 }
    },
    Yaxis = new List<YAxis> {
        Show = false,  // do not display the Y axis
        Title = new AxisTitle { Text = "Price" },
        Labels = new YAxisLabels
        {
            Formatter = @"function (value) { return Number(value).toLocaleString() + ' €';}"
        }
    },
    Tooltip = new Tooltip
    {
        X = new TooltipX { Format = "ddd d MMMM yyyy" },
        Y = new TooltipY { Formatter = @"function(value, { series, seriesIndex, dataPointIndex, w }) { return value + ' €'; }" }
    }
};

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>