Words squished and overlapping at category axis

korchev · August 24, 2021, 8:15pm

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