blazorblazorise

How to hide Pie char legend?


Im beginner to Blazorise and Blazorise Chart component, does any one know how to hide pie chart legend

enter image description here

here is my code


<Chart @ref="pieChart" Type="ChartType.Pie" TItem="double" Options="@chartOptions"  />




@*Pie chart*@

@code {
    private Chart<double> pieChart;

    ChartOptions chartOptions = new() { AspectRatio = 0.5 };
     
    private string[] Labels = { "Below 45 day's", "90 to 45 day's", "More than 90 day's", };
    private List<string> backgroundColors = new() { ChartColor.FromRgba(255, 99, 132, 0.2f), ChartColor.FromRgba(54, 162, 235, 0.2f), ChartColor.FromRgba(255, 206, 86, 0.2f), ChartColor.FromRgba(75, 192, 192, 0.2f), ChartColor.FromRgba(153, 102, 255, 0.2f), ChartColor.FromRgba(255, 159, 64, 0.2f) };
    private List<string> borderColors = new() { ChartColor.FromRgba(255, 99, 132, 1f), ChartColor.FromRgba(54, 162, 235, 1f), ChartColor.FromRgba(255, 206, 86, 1f), ChartColor.FromRgba(75, 192, 192, 1f), ChartColor.FromRgba(153, 102, 255, 1f), ChartColor.FromRgba(255, 159, 64, 1f) };

    private bool isAlreadyInitialised;

    private Random random = new(DateTime.Now.Millisecond);

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!isAlreadyInitialised)
        {
            isAlreadyInitialised = true;

            await HandleRedraw(pieChart, GetPieChartDataset);
        }
    }

    private async Task HandleRedraw<TDataSet, TItem, TOptions, TModel>(Blazorise.Charts.BaseChart<TDataSet, TItem, TOptions, TModel> chart, Func<TDataSet> getDataSet)
        where TDataSet : ChartDataset<TItem>
        where TOptions : ChartOptions
        where TModel : ChartModel
    {
        await chart.Clear();

        await chart.AddLabelsDatasetsAndUpdate(Labels, getDataSet());
    }

    private int pieLabel;

    private PieChartDataset<double> GetPieChartDataset()
    {
        return new()
        {
            Label = $"#{++pieLabel} of randoms",
            Data = RandomizeData(),
            BackgroundColor = backgroundColors,
            BorderColor = borderColors,
            BorderWidth = 1,
            
        };
    }
     
    List<double> RandomizeData() => RandomizeData(3, 50);

    List<double> RandomizeData(int min, int max)
    {
        return Enumerable.Range(0, 3).Select(x => random.Next(min, max) * random.NextDouble()).ToList();
    }

  
}

Solution

  • In ChartOptions you need to set the Plugins property and then inside plugins set the Legend property and set Display to false.

    ChartOptions chartOptions = new() {
        AspectRatio = 1.5,
        Plugins = new ChartPlugins
        {
            Legend = new ChartLegend
            {
                Display = false
            }
        }
    };