diff --git a/Radzen.Blazor/AxisBase.cs b/Radzen.Blazor/AxisBase.cs index 88b6382b73f..8d7784852ac 100644 --- a/Radzen.Blazor/AxisBase.cs +++ b/Radzen.Blazor/AxisBase.cs @@ -101,6 +101,17 @@ public abstract class AxisBase : RadzenChartComponentBase, IChartAxis /// true if visible; otherwise, false. [Parameter] public bool Visible { get; set; } = true; + /// + /// Specifies the label rotation angle in degrees. Set to null by default which means no rotation is applied. Has higher precedence than . + /// + [Parameter] + public double? LabelRotation { get; set; } = null; + + /// + /// Specifies the automatic label rotation angle in degrees. If set RadzenChart will automatically rotate the labels to fit the available space by the specified value. Has lower precedence than . + /// + [Parameter] + public double? LabelAutoRotation { get; set; } = null; /// protected override bool ShouldRefreshChart(ParameterView parameters) @@ -108,6 +119,8 @@ protected override bool ShouldRefreshChart(ParameterView parameters) return DidParameterChange(parameters, nameof(Min), Min) || DidParameterChange(parameters, nameof(Max), Max) || DidParameterChange(parameters, nameof(Visible), Visible) || + DidParameterChange(parameters, nameof(LabelRotation), LabelRotation) || + DidParameterChange(parameters, nameof(LabelAutoRotation), LabelAutoRotation) || DidParameterChange(parameters, nameof(Step), Step); } diff --git a/Radzen.Blazor/RadzenChart.razor b/Radzen.Blazor/RadzenChart.razor index 5e61fd1a9ca..0a923d69100 100644 --- a/Radzen.Blazor/RadzenChart.razor +++ b/Radzen.Blazor/RadzenChart.razor @@ -13,7 +13,7 @@ { - + @if(ShouldRenderAxes()) @@ -38,7 +38,7 @@ @donut.RenderTitle(MarginLeft, MarginTop) } } - + } diff --git a/Radzen.Blazor/Rendering/CategoryAxis.razor b/Radzen.Blazor/Rendering/CategoryAxis.razor index be98a69a9bb..760ceea1557 100644 --- a/Radzen.Blazor/Rendering/CategoryAxis.razor +++ b/Radzen.Blazor/Rendering/CategoryAxis.razor @@ -18,10 +18,10 @@ @XAxis.Ticks.Template(context) - } + } else if (!String.IsNullOrEmpty(text)) { - + } if (XAxis.GridLines.Visible && idx > start) @@ -47,6 +47,8 @@ private AxisBase XAxis { get; set; } private AxisBase YAxis { get; set; } + private double? rotate; + protected override void OnParametersSet() { XAxis = Chart.CategoryAxis; @@ -69,5 +71,30 @@ var valueTicks = Chart.ValueScale.Ticks(YAxis.TickDistance); y1 = Chart.ValueScale.Scale(valueTicks.Start); y2 = Chart.ValueScale.Scale(valueTicks.End); + + if (XAxis.LabelRotation != null) + { + rotate = XAxis.LabelRotation; + } + else if (XAxis.LabelAutoRotation != null) + { + rotate = null; + + var tickWidth = (x2 - x1) / ((double)end - (double)start); + + for (var idx = start; idx <= end; idx += step) + { + var value = Chart.CategoryScale.Value((double)idx); + var text = XAxis.Format(Chart.CategoryScale, value); + + var textWidth = TextMeasurer.TextWidth(text) - 8; + + if (textWidth > tickWidth) + { + rotate = XAxis.LabelAutoRotation; + break; + } + } + } } } diff --git a/Radzen.Blazor/Rendering/CategoryAxisTick.razor b/Radzen.Blazor/Rendering/CategoryAxisTick.razor index 43104344628..1495abd26a3 100644 --- a/Radzen.Blazor/Rendering/CategoryAxisTick.razor +++ b/Radzen.Blazor/Rendering/CategoryAxisTick.razor @@ -4,12 +4,38 @@ @if (ChildContent == null) { - - @Text - + @if (Rotate != null) + { + + @Text + + } + else + { + + @Text + + } } else { @ChildContent } - \ No newline at end of file + + +@code { + [Parameter] + public double? Rotate { get; set; } + + string x => X.ToInvariantString(); + string y => (Y + 6).ToInvariantString(); + + string angle => Rotate?.ToInvariantString(); + + string textAnchor => Rotate switch + { + > 0 => "start", + < 0 => "end", + _ => "middle" + }; +} \ No newline at end of file diff --git a/Radzen.Blazor/themes/components/blazor/_chart.scss b/Radzen.Blazor/themes/components/blazor/_chart.scss index 07a7b7269dd..673e1f4e523 100644 --- a/Radzen.Blazor/themes/components/blazor/_chart.scss +++ b/Radzen.Blazor/themes/components/blazor/_chart.scss @@ -144,10 +144,6 @@ $chart-color-schemes: ( } } -.rz-category-axis .rz-tick-text { - text-anchor: middle; -} - .rz-axis .rz-axis-title { stroke: none; text-anchor: middle; @@ -330,7 +326,7 @@ $chart-color-schemes: ( gap: 1rem; padding: 0.125rem 0.5rem; border-radius: var(--rz-chart-tooltip-item-border-radius); - + &:hover { background-color: var(--rz-chart-tooltip-item-hover-background-color); } diff --git a/RadzenBlazorDemos/Pages/AreaChartConfig.razor b/RadzenBlazorDemos/Pages/AreaChartConfig.razor index b7f6d3a04ec..b9a4f3a3424 100644 --- a/RadzenBlazorDemos/Pages/AreaChartConfig.razor +++ b/RadzenBlazorDemos/Pages/AreaChartConfig.razor @@ -21,7 +21,7 @@ - + diff --git a/RadzenBlazorDemos/Pages/ChartLabelAutoRotation.razor b/RadzenBlazorDemos/Pages/ChartLabelAutoRotation.razor new file mode 100644 index 00000000000..d5dff12237f --- /dev/null +++ b/RadzenBlazorDemos/Pages/ChartLabelAutoRotation.razor @@ -0,0 +1,61 @@ +@using System.Globalization + + + + + + + + @(rotation)° + + + + + @(width)px + + + + + + + + + + + + + + + + +@code { + double rotation = -45; + bool showDataLabels = false; + double width = 600; + + 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[] revenue2024 = new DataItem[] { + new DataItem { Date = "January", Revenue = 234000 }, + new DataItem { Date = "February", Revenue = 269000 }, + new DataItem { Date = "March", Revenue = 233000 }, + new DataItem { Date = "April", Revenue = 244000 }, + new DataItem { Date = "May", Revenue = 214000 }, + new DataItem { Date = "June", Revenue = 253000 }, + new DataItem { Date = "July", Revenue = 274000 }, + new DataItem { Date = "August", Revenue = 284000 }, + new DataItem { Date = "September", Revenue = 273000 }, + new DataItem { Date = "October", Revenue = 282000 }, + new DataItem { Date = "November", Revenue = 289000 }, + new DataItem { Date = "December", Revenue = 294000 } + }; +} \ No newline at end of file diff --git a/RadzenBlazorDemos/Pages/ChartLabelRotation.razor b/RadzenBlazorDemos/Pages/ChartLabelRotation.razor new file mode 100644 index 00000000000..fe7342445c1 --- /dev/null +++ b/RadzenBlazorDemos/Pages/ChartLabelRotation.razor @@ -0,0 +1,55 @@ +@using System.Globalization + + + + + + + + @(rotation)° + + + + + + + + + + + + + + + + +@code { + double rotation = -45; + bool showDataLabels = false; + + 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[] revenue2024 = new DataItem[] { + new DataItem { Date = "January", Revenue = 234000 }, + new DataItem { Date = "February", Revenue = 269000 }, + new DataItem { Date = "March", Revenue = 233000 }, + new DataItem { Date = "April", Revenue = 244000 }, + new DataItem { Date = "May", Revenue = 214000 }, + new DataItem { Date = "June", Revenue = 253000 }, + new DataItem { Date = "July", Revenue = 274000 }, + new DataItem { Date = "August", Revenue = 284000 }, + new DataItem { Date = "September", Revenue = 273000 }, + new DataItem { Date = "October", Revenue = 282000 }, + new DataItem { Date = "November", Revenue = 289000 }, + new DataItem { Date = "December", Revenue = 294000 } + }; +} \ No newline at end of file diff --git a/RadzenBlazorDemos/Pages/ChartLabelRotationPage.razor b/RadzenBlazorDemos/Pages/ChartLabelRotationPage.razor new file mode 100644 index 00000000000..0d7eed7a219 --- /dev/null +++ b/RadzenBlazorDemos/Pages/ChartLabelRotationPage.razor @@ -0,0 +1,30 @@ +@page "/chart-label-rotation" + + + Radzen Blazor Chart label rotation + + + Auto Rotation + + + The Radzen Blazor Chart component can automatically rotate the labels of the category axis when they overlap. + To enable that set the LabelAutoRotation property: LabelAutoRotation="-45". + + + Try changing the angle and the width of the chart to see the effect. + + + + + + Predefined Rotation + + + To always rotate the labels of the category axis set the LabelRotation property: LabelRotation="-45". + + + Try changing the angle and the width of the chart to see the effect. + + + + diff --git a/RadzenBlazorDemos/Services/ExampleService.cs b/RadzenBlazorDemos/Services/ExampleService.cs index f7d7b04fe07..278a674c9c5 100644 --- a/RadzenBlazorDemos/Services/ExampleService.cs +++ b/RadzenBlazorDemos/Services/ExampleService.cs @@ -1583,6 +1583,15 @@ public class ExampleService Tags = new [] { "chart", "graph", "legend" } }, new Example + { + Name = "Label Rotation", + Path = "chart-label-rotation", + Title = "Blazor Chart Component - Label Rotation | Free UI Components by Radzen", + Description = "The Radzen Blazor Chart can rotate the labels of the horizontal axis.", + New = true, + Tags = new [] { "chart", "label", "rotate", "rotation" } + }, + new Example { Name = "Trends", Path = "chart-trends",