Words squished and overlapping at category axis

blazor_newbie · August 24, 2021, 6:57pm

I have a problem with the category axis labels overlapping in my column chart as shown below. Is there a solution to this? I've read the option to give labels a vertical orientation is something planned for a future update. However, I'd like to resolve this issue within the next few days. Would it be reasonable for me to try to alter the source code of the Radzen component library and try to add the option myself? If so, could you guide me in the right direction about how to attempt to do this?

korchev · August 24, 2021, 8:15pm

Hi @blazor_newbie,

I am afraid at the moment we don't have a solution. A possible workaround is listed in this thread: Column Chart Spacing issue - #4 by Kyle - it hides the category axis and relies on the legend to display all series. It also applies a custom color to every bar.

Unfortunately this is not a trivial task to attempt. Rotating the labels affects the layout algorithm of the chart - it has to measure the rotated text when calculating the category position. Still if you decide to give it a go you can check the following files:

github.com

radzenhq/radzen-blazor/blob/master/Radzen.Blazor/Rendering/CategoryAxis.razor

@inherits RadzenChartComponentBase

@if (XAxis.Visible)
{
    <g class="rz-axis rz-category-axis">
    <Line Class="rz-line" X1="@x1" Y1="@y1" X2="@x2" Y2="@y1" Stroke="@XAxis.Stroke" StrokeWidth="@XAxis.StrokeWidth" LineType="@XAxis.LineType" />
    @for (var idx = start; idx <= end; idx += step)
    {
        var value = Chart.CategoryScale.Value((double)idx);
        var x = Chart.CategoryScale.Scale((double)idx, true);

        var text = XAxis.Format(Chart.CategoryScale, value);

        if (XAxis.Ticks.Template != null)
        {
            var context = new TickTemplateContext { Text = text, Value = value, X = x, Y = y1 } ;

            <CategoryAxisTick X="@x" Y="@y1" Text="@text" Stroke="@(XAxis.Ticks.Stroke ?? XAxis.Stroke)" StrokeWidth="@XAxis.Ticks.StrokeWidth" LineType="@XAxis.Ticks.LineType">
                @XAxis.Ticks.Template(context)
            </CategoryAxisTick>

This file has been truncated. show original

github.com

radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenCategoryAxis.razor

@using Radzen.Blazor
@using Radzen.Blazor.Rendering
@inherits AxisBase
<CascadingValue Value="@this">
  @ChildContent
</CascadingValue>
@code {
  internal double Measure(RadzenChart chart)
      {
          if (Visible == false)
          {
              return 0;
          }

          if (chart.ShouldInvertAxes())
          {
              return AxisMeasurer.XAxis(chart.ValueAxis.Title);
          }
          else
          {

This file has been truncated. show original

korchev · November 4, 2024, 7:08am

Axis label rotation has been implemented since Radzen.Blazor 5.5.0.