mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-07-08 18:16:08 +00:00
c918ce3d8c
Extend the chart SEO work to the 15 chart configuration and feature demo pages (axis, legend, tooltip, interpolation, data labels, crosshair, etc.): - GetChartConfigPages() + SeoSchema treats these pages as article- eligible (TechArticle + BreadcrumbList + FAQPage), without adding them to the /charts gallery ItemList - Human-readable intros, "how do I..." FAQs, and related links per page
35 lines
1.8 KiB
Plaintext
35 lines
1.8 KiB
Plaintext
@page "/chart-label-rotation"
|
|
|
|
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
|
|
Radzen Blazor Chart label rotation
|
|
</RadzenText>
|
|
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
|
|
When category labels are long or crowded, rotating them keeps the axis readable. The chart can rotate labels automatically or to an angle you set.
|
|
</RadzenText>
|
|
|
|
<RadzenText Anchor="chart-label-rotation#auto-rotation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
|
|
Auto Rotation
|
|
</RadzenText>
|
|
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
|
|
The Radzen Blazor Chart component can automatically rotate the labels of the category axis when they overlap.
|
|
To enable that set the <strong>LabelAutoRotation</strong> property: <code>LabelAutoRotation="-45"</code>.
|
|
</RadzenText>
|
|
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
|
|
Try changing the angle and the width of the chart to see the effect.
|
|
</RadzenText>
|
|
<RadzenExample ComponentName="Chart" Example="ChartLabelAutoRotation" DocumentationLink="https://blazor.radzen.com/docs/guides/components/chart.html">
|
|
<ChartLabelAutoRotation />
|
|
</RadzenExample>
|
|
<RadzenText Anchor="chart-label-rotation#rotation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
|
|
Predefined Rotation
|
|
</RadzenText>
|
|
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
|
|
To always rotate the labels of the category axis set the <strong>LabelRotation</strong> property: <code>LabelRotation="-45"</code>.
|
|
</RadzenText>
|
|
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
|
|
Try changing the angle and the width of the chart to see the effect.
|
|
</RadzenText>
|
|
<RadzenExample ComponentName="Chart" Example="ChartLabelRotation" DocumentationLink="https://blazor.radzen.com/docs/guides/components/chart.html">
|
|
<ChartLabelRotation />
|
|
</RadzenExample>
|