Im beginner to Blazorise and Blazorise Chart component, does any one know how to hide pie chart legend
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();
}
}
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
}
}
};