How to put the legend at the bottom of the chart before load of data in apex chart using blazor?

Question

I have created a simple apex chart component using blazor.here is my code component .

<ApexChart @ref=_detailsChart TItem="SalesByLocationResponse"
           Title="Order Gross Value "
           Debug>

          <ApexPointSeries TItem="SalesByLocationResponse"
                           Items="salesBylocation"
                           Name="Stocks"
                           SeriesType="SeriesType.Donut" 
                           XValue="@(e => e.Location.CodeName)"
                           YValue="@(e => e.TotalSalesAmt)"
                           OrderByDescending="e=>e.X"/>

</ApexChart>

but always the legend has been located right side of the donut chart .like this

Now I have needed to put the legend at the bottom.How can I do this??

Answer 1

You can use the ApexChartOptions to control the Legend appearance.

<ApexChart TItem="Order"
           Title="Order Gross Value"
           Options=options>

    <ApexPointSeries TItem="Order"
                     Items="orders"
                     Name="Gross Value"
                     SeriesType="SeriesType.Pie"
                     XValue="@(e => e.Country)"
                     YAggregate="@(e => e.Sum(e => e.GrossValue))"
                     OrderByDescending="e=>e.X" />
</ApexChart>


@code {
private List<Order> orders { get; set; } = SampleData.GetOrders();
private ApexChartOptions<Order> options { get; set; } = new();

protected override void OnInitialized()
{
    options.Legend = new Legend { Position = LegendPosition.Bottom, FontSize ="20px", HorizontalAlign = Align.Center };
}
}