Hi,
I haven't found the chart setting instructing the ValueAxis text to change its orientation automatically as it seems to be in the RadzenCRM Step by step tutorial.
Thank you
Fred
Hi @FredK_Trashmail,
There is no such setting and this is why you haven't found it. The title of the value axis is always rotated.
This is what I am struggling with. Mine doesn’t. Small série, large série, it always overlaps and stays horizontal (using Safari).
Do you mean the category axis (which is the horizontal one)? If yes - there is no way to change the orientation of the labels at the moment.
Hi Korchev,
This is what I meant. In your Step by Step CRM example, one can see that the labels on the horizontal line are vertical and move / re-render towards a 135° angle as you add width. In the example below, such behaviour doesn't exist and a very limited number of columns make it very messy to read.
Thanks
Fred
The labels of the horizontal and vertical axis do not support rotation. What you see in the tutorial is a screenshot from the Angular chart component which is an entirely different component based on a third party open source library.
On another thread you have already showed how to rotate labels by 45 degrees:
@context.Valueany update about this?
Any update? I need to change the orientation of CategoryAxis values.
Hi Korchev,
After apply the code above inside RadzenChart tags:
Seems to work as expected in our demos.
If you have a subscription you can send us your app to info@radzen.com for troubleshooting.
Do you have the link for the sample above?
It is the online demo which the code from the linked thread.
Now it's working Korchev. Thanks!
This demo seems to be diferent. I had same problem with category axis and solution explained doesn´t work in my case. Can you provide a new sample?
Here is a complete working demo:
@using System.Globalization
<style>
.rz-chart svg {
overflow: visible;
}
</style>
<RadzenChart>
<RadzenChartTooltipOptions Shared="@sharedTooltip" />
<RadzenLineSeries Smooth="@smooth" Data="@revenue2023" CategoryProperty="Date" Title="2023" LineType="LineType.Dashed" ValueProperty="Revenue">
</RadzenLineSeries>
<RadzenLineSeries Smooth="@smooth" Data="@revenue2024" CategoryProperty="Date" Title="2024" ValueProperty="Revenue">
<RadzenMarkers Visible="@showMarkers" MarkerType="MarkerType.Circle" />
<RadzenSeriesDataLabels Visible="@showDataLabels" />
</RadzenLineSeries>
<RadzenCategoryAxis Padding="20">
<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 Formatter="@FormatAsUSD">
<RadzenGridLines Visible="true" />
<RadzenAxisTitle Text="Revenue in USD" />
</RadzenValueAxis>
</RadzenChart>
@code {
bool smooth = false;
bool sharedTooltip = true;
bool showDataLabels = false;
bool showMarkers = true;
class DataItem
{
public string Date { get; set; }
public double Revenue { get; set; }
}
string FormatAsUSD(object value)
{
return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US"));
}
DataItem[] revenue2023 = new DataItem[] {
new DataItem
{
Date = "Jan",
Revenue = 234000
},
new DataItem
{
Date = "Feb",
Revenue = 269000
},
new DataItem
{
Date = "Mar",
Revenue = 233000
},
new DataItem
{
Date = "Apr",
Revenue = 244000
},
new DataItem
{
Date = "May",
Revenue = 214000
},
new DataItem
{
Date = "Jun",
Revenue = 253000
},
new DataItem
{
Date = "Jul",
Revenue = 274000
},
new DataItem
{
Date = "Aug",
Revenue = 284000
},
new DataItem
{
Date = "Sept",
Revenue = 273000
},
new DataItem
{
Date = "Oct",
Revenue = 282000
},
new DataItem
{
Date = "Nov",
Revenue = 289000
},
new DataItem
{
Date = "Dec",
Revenue = 294000
}
};
DataItem[] revenue2024 = new DataItem[] {
new DataItem
{
Date = "Jan",
Revenue = 334000
},
new DataItem
{
Date = "Feb",
Revenue = 369000
},
new DataItem
{
Date = "Mar",
Revenue = 333000
},
new DataItem
{
Date = "Apr",
Revenue = 344000
},
new DataItem
{
Date = "May",
Revenue = 314000
},
new DataItem
{
Date = "Jun",
Revenue = 353000
},
new DataItem
{
Date = "Jul",
Revenue = 374000
},
new DataItem
{
Date = "Aug",
Revenue = 384000
},
new DataItem
{
Date = "Sept",
Revenue = 373000
},
new DataItem
{
Date = "Oct",
Revenue = 382000
},
new DataItem
{
Date = "Nov",
Revenue = 389000
},
new DataItem
{
Date = "Dec",
Revenue = 394000
}
};
}
It can be pasted in this demo and run to produce this:
Thanks! Best regards
Category axis label rotation is now supported out of the box: Blazor Chart Component - Label Rotation | Free UI Components by Radzen