Radzen Chart: How to show bar labels in chart legend?

Radzen.Blazor Components
1

I've integrated the Radzen chart to display the capacity of event workshops. Currently, the labels on the bars are overlapping, which makes the chart hard to read. I'd prefer to display the bar labels in the chart legend, with their corresponding colors, to make it more user-friendly. Below is the code I've used. Could you help me refine it to meet my requirements?

chart
chart937×550 25 KB

Here's the chart for displaying event workshop capacity:

<RadzenCustomBarChart WorkshopData="@workshopData" />

@code {
    private ChartItem[] workshopData { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await GetEvent();
    }

    private async Task GetEvent()
    {
        // Code to fetch the event object

        workshopData = new ChartItem[1];
        var workshopSessions = myEvent.Sessions.Where(x => x.SessionType == SessionTypeEnum.WORKSHOP).ToList();
        workshopData = workshopSessions.Select(ws => new ChartItem
        {
            Label = ws.Code,
            Value = ws.Capacity
        }).ToArray();
    }
}

This is the RadzenCustomBarChart component:

<RadzenChart>
    <RadzenColumnSeries Data="@WorkshopData"
                        CategoryProperty="Label"
                        Title="Capacity"
                        Fills="@GetColors(WorkshopData.Length)"
                        LineType="LineType.Dashed"
                        ValueProperty="Value">
        <RadzenSeriesDataLabels Visible="true"/>
    </RadzenColumnSeries>
    <RadzenColumnOptions Radius="5" Width="25" />
    <RadzenCategoryAxis Padding="10" />
    <RadzenValueAxis>
        <RadzenGridLines Visible="true"/>
        <RadzenAxisTitle Text="Workshop Capacities"/>
    </RadzenValueAxis>
</RadzenChart>

@code {
    [Parameter]
    public ChartItem[] WorkshopData { get; set; }

    private string[] GetColors(int count)
    {
        string[] colors = new string[count];
        Random random = new Random();
        for (int i = 0; i < count; i++)
        {
            colors[i] = $"#{random.Next(0x1000000):X6}";
        }
        return colors;
    }
}

And the ChartItem class definition:

public class ChartItem
{
    public string Label { get; set; }
    public double Value { get; set; }
}
2

Hi @Ibrahim_Tamimi,

Your requirements are not supported. You can either increase the width of the chart or check this thread which shows how to rotate the labels: Radzen Blazor Chart column description styling - #3 by korchev

1 Like
3

Thank you very much sir. I looked up the thread that you shared and I managed to solve my issue. Here is my modified RadzenCustomBarChart component with the chart image incase anyone might benefit from this solution.

Latest chart:
chart3

Updated RadzenCustomBarChart component:

<style>
    .rz-chart svg {
        overflow: visible;
    }
</style>

<RadzenChart>
    <RadzenColumnSeries Data="@WorkshopData"
                        CategoryProperty="Label"
                        Fills="@GetColors(WorkshopData.Length)"
                        LineType="LineType.Dashed"
                        ValueProperty="Value">
        <RadzenSeriesDataLabels Visible="true"/>
    </RadzenColumnSeries>
    <RadzenColumnOptions Radius="5" Width="25" />
    <RadzenCategoryAxis>
        <RadzenTicks>
        <Template>
            <text class="rz-tick-text" style="text-anchor: start; transform: translate(@(context.X)px, @(context.Y + 10)px) rotate(45deg)">@context.Value</text>
        </Template>
        </RadzenTicks>
    </RadzenCategoryAxis>
    <RadzenValueAxis>
        <RadzenGridLines Visible="true"/>
        <RadzenAxisTitle Text="Workshop Capacities"/>
    </RadzenValueAxis>
    <RadzenLegend Visible="false" />
</RadzenChart>

@code {
    [Parameter]
    public ChartItem[] WorkshopData { get; set; }

    private string[] GetColors(int count)
    {
        string[] colors = new string[count];
        Random random = new Random();
        for (int i = 0; i < count; i++)
        {
            colors[i] = $"#{random.Next(0x1000000):X6}";
        }
        return colors;
    }
}
2 Likes