starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-07-08 18:16:08 +00:00
Code Issues 1.3k Packages Projects Releases 28 Wiki Activity

Add SEO schema and copy to chart configuration/feature demos

Browse Source 
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
This commit is contained in:
Atanas Korchev
2026-06-18 17:49:54 +03:00
parent 7fd1445246
commit c918ce3d8c
17 changed files with 123 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
RadzenBlazorDemos/Pages/AxisCrossingChartPage.razor
View File

@@ -4,9 +4,7 @@
Radzen Blazor Chart with axis crossing
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Set <code>CrossesAt</code> on <code>RadzenValueAxis</code> or <code>RadzenCategoryAxis</code> to position the axis
at a specific value on the perpendicular axis. For example, setting <code>CrossesAt="0"</code> on both axes
creates a standard mathematical coordinate system where axes intersect at the origin.
Axis crossing moves where the axes meet, so you can place the baseline at a specific value instead of the chart edge - useful when data swings above and below a reference point.
</RadzenText>
<RadzenExample ComponentName="Chart" Example="AxisCrossingChartConfig"

2
RadzenBlazorDemos/Pages/ChartAnnotationsPage.razor
View File

@@ -4,7 +4,7 @@
Radzen Blazor Chart annotations
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Add text labels and visual markers to highlight specific data points on charts.
Annotations add text callouts to specific points on a chart, so you can flag an event, a peak, or a note right where it matters.
</RadzenText>
<RadzenExample ComponentName="Chart" Example="ChartAnnotations" Heading="false" DocumentationLink="https://blazor.radzen.com/docs/guides/components/chart.html">

2
RadzenBlazorDemos/Pages/ChartAxisPage.razor
View File

@@ -4,7 +4,7 @@
Radzen Blazor Chart Axis
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
The Radzen Blazor Chart displays a legend by default. It uses the <code>Title</code> property of the series (or category values for pie series) as items in the legend.
The axes set the frame a chart is read against - the scale, the gridlines, the labels. By default they fit the data, but you can pin the range, format the values, and add a title.
</RadzenText>
<RadzenText Anchor="chart-axis#min-max-and-step" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">

2
RadzenBlazorDemos/Pages/ChartCrosshairPage.razor
View File

@@ -4,7 +4,7 @@
Radzen Blazor Chart crosshair
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Configure a per-axis crosshair that snaps to the nearest data point (or follows the cursor with <code>Snap="false"</code>) and optionally shows a small label with the formatted axis value.
A crosshair draws guide lines that track the cursor across the chart, snapping to the nearest point and optionally labeling the axis value - making it easy to read a precise position.
</RadzenText>
<RadzenExample ComponentName="Chart" Example="ChartCrosshair" DocumentationLink="https://blazor.radzen.com/docs/guides/components/chart.html">

2
RadzenBlazorDemos/Pages/ChartDataLabelsPage.razor
View File

@@ -4,7 +4,7 @@
Radzen Blazor Chart data labels
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Display values at the data points with configurable position, background chip, overlap hiding, display strategy and formatting.
Data labels print the value next to each point or bar, so readers get exact numbers without reading off the axis. You can position them, add a background chip, format them, and hide overlaps.
</RadzenText>
<RadzenExample ComponentName="Chart" Example="ChartDataLabelsConfig" DocumentationLink="https://blazor.radzen.com/docs/guides/components/chart.html">

2
RadzenBlazorDemos/Pages/ChartInterpolationPage.razor
View File

@@ -4,7 +4,7 @@
Radzen Blazor Chart interpolation mode
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Control how data points connect in line and area charts with various interpolation modes.
Interpolation controls how a line or area connects its points - straight segments, a smooth spline, or flat steps. The choice changes how the trend reads between points.
</RadzenText>
<RadzenExample ComponentName="Chart" Example="ChartInterpolationConfig" DocumentationLink="https://blazor.radzen.com/docs/guides/components/chart.html">

2
RadzenBlazorDemos/Pages/ChartLabelRotationPage.razor
View File

@@ -4,7 +4,7 @@
Radzen Blazor Chart label rotation
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Rotate chart axis labels automatically or with predefined angles to prevent overlap.
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">

2
RadzenBlazorDemos/Pages/ChartLegendPage.razor
View File

@@ -4,7 +4,7 @@
Radzen Blazor Chart Legend
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
The Radzen Blazor Chart displays a legend by default. It uses the <code>Title</code> property of the series (or category values for pie series) as items in the legend.
The legend tells readers which series is which. It shows by default using each series title; you can move it, restyle it, or hide it entirely.
</RadzenText>
<RadzenText Anchor="chart-legend#legend-position" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">

2
RadzenBlazorDemos/Pages/ChartSeriesPage.razor
View File

@@ -3,7 +3,7 @@
Radzen Blazor Chart
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
Use the Radzen Blazor Chart component to display data in a graphical format.
The series is the heart of a chart - each one binds a set of data to a visual form like a line, bar, or pie. Most chart questions start here: how to bind data, combine series, and handle interaction.
</RadzenText>
<RadzenText Anchor="chart-series#series" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">

2
RadzenBlazorDemos/Pages/ChartToolTipPage.razor
View File

@@ -4,7 +4,7 @@
Radzen Blazor Chart Tooltip
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
The Radzen Blazor Chart displays a tooltip when the user hovers series with the mouse. The tooltip by default includes the series category, value and series name.
Tooltips show the values behind a point on hover. You can customize their content, share one tooltip across series, split them, or turn them off.
</RadzenText>
<RadzenText Anchor="chart-tooltip#customize-tooltip-content" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">

4
RadzenBlazorDemos/Pages/IndexedCategoryAxisChartPage.razor
View File

@@ -4,9 +4,7 @@
Radzen Blazor Chart with indexed category axis
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Use a numeric <code>CategoryProperty</code> to align multiple series by index rather than
by matching category values. Each series can have different category labels at the same index.
Use a <code>Formatter</code> on <code>RadzenCategoryAxis</code> to display custom labels.
An indexed category axis lines series up by position rather than by matching category values, so series with different or missing categories still align point for point.
</RadzenText>
<RadzenExample ComponentName="Chart" Example="IndexedCategoryAxisChartConfig"

3
RadzenBlazorDemos/Pages/InvertedAxisChartPage.razor
View File

@@ -4,8 +4,7 @@
Radzen Blazor Chart with inverted axes
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Set <code>Inverted</code> on <code>RadzenValueAxis</code> or <code>RadzenCategoryAxis</code> to reverse the axis direction.
Both axes can be inverted independently.
Inverting an axis reverses its direction, so values count down instead of up, or categories run the opposite way - handy for rankings where 1 should sit at the top.
</RadzenText>
<RadzenExample ComponentName="Chart" Example="InvertedAxisChartConfig"

4
RadzenBlazorDemos/Pages/LogarithmicAxisChartPage.razor
View File

@@ -4,9 +4,7 @@
Radzen Blazor Chart with logarithmic axis
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Set <code>Logarithmic</code> on <code>RadzenValueAxis</code> to use a logarithmic scale.
This is useful when data spans several orders of magnitude.
The default base is 10. Use <code>LogarithmicBase</code> to change it.
A logarithmic axis compresses a huge range onto a readable scale, so values spanning several orders of magnitude - from tens to millions - all stay visible on one chart.
</RadzenText>
<RadzenExample ComponentName="Chart" Example="LogarithmicAxisChartConfig"

4
RadzenBlazorDemos/Pages/MultipleAxesChartPage.razor
View File

@@ -4,9 +4,7 @@
Radzen Blazor Chart with multiple value axes
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Combine series with different scales on separate value axes. The primary axis (without <code>Name</code>) renders on the left.
Additional named axes render on the right. Use <code>ValueAxisName</code> on a series to bind it to a named axis.
A chart can have unlimited value axes however two or three are recommended for readability.
Multiple value axes let you plot series with very different scales on the same chart - revenue in thousands next to a percentage, each with its own axis.
</RadzenText>
<RadzenExample ComponentName="Chart" Example="MultipleAxesChartConfig"

2
RadzenBlazorDemos/Pages/StylingChartPage.razor
View File

@@ -4,7 +4,7 @@
Radzen Blazor Chart Styling
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Customize chart appearance with colors, fonts, and visual properties.
This example shows how to restyle a chart - color schemes, custom series colors, fills, and fonts - to match your brand or theme.
</RadzenText>
<RadzenExample ComponentName="Chart" Example="StylingChartConfig" DocumentationLink="https://blazor.radzen.com/docs/guides/components/chart.html">

121
RadzenBlazorDemos/Services/ExampleService.cs
View File

@@ -2257,7 +2257,13 @@ namespace RadzenBlazorDemos
Name = "Series",
Path = "chart-series",
Title = "Blazor Chart - Series Config | Free UI Components by Radzen",
Description = "Use the Radzen Blazor Chart component to display data in a graphical format.",
Description = "Bind data to a line, bar, pie, or other series - the building block of every Blazor chart.",
Related = new [] { "line-chart", "column-chart", "chart-axis" },
Faq = new []
{
new FaqItem { Question = "How do I add a series to a chart?", Answer = "Place a series component such as RadzenLineSeries or RadzenColumnSeries inside the chart and bind its Data, then point CategoryProperty and ValueProperty at the fields you want." },
new FaqItem { Question = "Can I combine different series types?", Answer = "Yes. Put more than one series inside the same chart - a column series with a line overlay, for example - as long as they share compatible axes." }
},
Tags = new [] { "chart", "graph", "series" }
},
new Example
@@ -2266,14 +2272,26 @@ namespace RadzenBlazorDemos
Name = "Axis",
Path = "chart-axis",
Title = "Blazor Chart - Axis Config | Free UI Components by Radzen",
Description = "By default the Radzen Blazor Chart determines the Y axis minimum and maximum based on the range of values.",
Description = "Control the scale, gridlines, labels, and title of a Blazor chart's axes, or let them fit the data automatically.",
Related = new [] { "chart-series", "multiple-axes-chart", "logarithmic-axis-chart" },
Faq = new []
{
new FaqItem { Question = "How do I set the axis minimum, maximum, and step?", Answer = "Set Min, Max, and Step on the value axis to control the range and tick spacing instead of letting the chart pick them from the data." },
new FaqItem { Question = "How do I format axis labels?", Answer = "Use the axis FormatString to display values as currency, percentages, dates, or any format you need." }
},
Tags = new [] { "chart", "graph", "series" }
},
new Example
{
Name = "Multiple Axes",
Path = "multiple-axes-chart",
Description = "Radzen Blazor Chart with multiple value axes for combining series with different scales.",
Description = "Plot series with very different scales on one Blazor chart, each reading against its own value axis.",
Related = new [] { "chart-axis", "line-chart", "column-chart" },
Faq = new []
{
new FaqItem { Question = "When should I use multiple axes?", Answer = "When two series share a category axis but live on different scales - units sold versus conversion rate - so one would flatten the other on a single axis." },
new FaqItem { Question = "How do I assign a series to a second axis?", Answer = "Add a second value axis and point the series at it, so each series reads against the axis that fits its scale." }
},
Tags = new [] { "chart", "graph", "multiple", "axes", "axis", "dual", "secondary" },
New = true
},
@@ -2281,7 +2299,12 @@ namespace RadzenBlazorDemos
{
Name = "Inverted Axis",
Path = "inverted-axis-chart",
Description = "Radzen Blazor Chart with inverted axes to reverse the direction of values or categories.",
Description = "Reverse the direction of a Blazor chart axis, so values count down or categories run the opposite way.",
Related = new [] { "chart-axis", "bar-chart", "column-chart" },
Faq = new []
{
new FaqItem { Question = "When would I invert an axis?", Answer = "When the natural reading runs backwards - a leaderboard where rank 1 belongs at the top, or a depth scale that increases downward." }
},
Tags = new [] { "chart", "graph", "inverted", "reversed", "axis", "flip" },
New = true
},
@@ -2289,7 +2312,12 @@ namespace RadzenBlazorDemos
{
Name = "Axis Crossing",
Path = "axis-crossing-chart",
Description = "Radzen Blazor Chart with axis crossing to position axes at specific values instead of chart edges.",
Description = "Position a Blazor chart axis to cross at a specific value instead of the chart edge.",
Related = new [] { "chart-axis", "negative-column-chart", "chart-reference-line" },
Faq = new []
{
new FaqItem { Question = "When should I move the axis crossing?", Answer = "When zero is not at the edge of your data - for example values centered on a target, where you want the axis to cross at that target rather than at the bottom." }
},
Tags = new [] { "chart", "graph", "axis", "crossing", "origin", "intersect" },
New = true
},
@@ -2297,7 +2325,12 @@ namespace RadzenBlazorDemos
{
Name = "Logarithmic Axis",
Path = "logarithmic-axis-chart",
Description = "Radzen Blazor Chart with logarithmic value axis for data spanning several orders of magnitude.",
Description = "Use a logarithmic axis on a Blazor chart to keep values spanning several orders of magnitude readable.",
Related = new [] { "chart-axis", "line-chart", "scatter-chart" },
Faq = new []
{
new FaqItem { Question = "When should I use a logarithmic axis?", Answer = "When your values span orders of magnitude and a linear axis would squash the small ones into the baseline - population, revenue across very different sizes, or scientific data." }
},
Tags = new [] { "chart", "graph", "logarithmic", "log", "axis", "scale" },
New = true
},
@@ -2305,7 +2338,12 @@ namespace RadzenBlazorDemos
{
Name = "Indexed Category Axis",
Path = "indexed-category-axis-chart",
Description = "Radzen Blazor Chart with indexed category axis where series are aligned by index rather than category value.",
Description = "Align Blazor chart series by position rather than matching category values with an indexed category axis.",
Related = new [] { "chart-axis", "line-chart", "chart-series" },
Faq = new []
{
new FaqItem { Question = "When do I need an indexed category axis?", Answer = "When your series do not share the same category values but you still want them aligned by order - comparing sequences of different lengths or with gaps." }
},
Tags = new [] { "chart", "graph", "indexed", "category", "axis" },
New = true
},
@@ -2315,7 +2353,13 @@ namespace RadzenBlazorDemos
Name = "Legend",
Path = "chart-legend",
Title = "Blazor Chart - Legend Config | Free UI Components by Radzen",
Description = "The Radzen Blazor Chart displays a legend by default. It uses the Title property of the series (or category values for pie series) as items in the legend.",
Description = "Show, move, restyle, or hide the legend that tells readers which series is which on a Blazor chart.",
Related = new [] { "chart-series", "chart-tooltip", "pie-chart" },
Faq = new []
{
new FaqItem { Question = "How do I hide the chart legend?", Answer = "Add a legend component with Visible set to false - the chart then renders without the legend." },
new FaqItem { Question = "Can I move the legend?", Answer = "Yes. Set the legend Position to place it on any side of the chart." }
},
Tags = new [] { "chart", "graph", "legend" }
},
new Example
@@ -2324,7 +2368,13 @@ namespace RadzenBlazorDemos
Name = "ToolTip",
Path = "chart-tooltip",
Title = "Blazor Chart - ToolTip Config | Free UI Components by Radzen",
Description = "Blazor Chart tooltip shown on hover. Customize content, enable shared or split tooltip, or disable tooltips per series.",
Description = "Show values on hover with Blazor chart tooltips - customize content, share, split, or turn them off.",
Related = new [] { "chart-crosshair", "chart-sync", "chart-legend" },
Faq = new []
{
new FaqItem { Question = "How do I customize tooltip content?", Answer = "Provide a tooltip template for the series to render any markup you want in place of the default value." },
new FaqItem { Question = "How do I show one shared tooltip for all series?", Answer = "Enable the shared tooltip so a single tooltip lists every series value at the hovered category." }
},
Tags = new [] { "chart", "graph", "legend", "shared", "split", "tooltip" },
Updated = true
},
@@ -2334,7 +2384,12 @@ namespace RadzenBlazorDemos
Name = "Label Rotation",
Path = "chart-label-rotation",
Title = "Blazor Chart - Label Rotation | Free UI Components by Radzen",
Description = "The Radzen Blazor Chart can rotate the labels of the horizontal axis.",
Description = "Rotate crowded category labels on a Blazor chart, automatically or to an angle you set, to keep them readable.",
Related = new [] { "chart-axis", "column-chart", "bar-chart" },
Faq = new []
{
new FaqItem { Question = "How do I stop axis labels from overlapping?", Answer = "Let the chart auto-rotate the labels, or set a fixed rotation angle so long labels tilt instead of colliding." }
},
Tags = new [] { "chart", "label", "rotate", "rotation" }
},
new Example
@@ -2342,7 +2397,13 @@ namespace RadzenBlazorDemos
Name = "Interpolation",
Path = "chart-interpolation",
Title = "Blazor Chart - Interpolation | Free UI Components by Radzen",
Description = "This example demonstrates Radzen Blazor Chart interpolation mode.",
Description = "Choose how a Blazor line or area chart connects its points - straight, smooth spline, or flat steps.",
Related = new [] { "line-chart", "spline-chart", "step-line-chart" },
Faq = new []
{
new FaqItem { Question = "What interpolation modes are available?", Answer = "Straight line (the default), spline for a smooth curve, and step to hold each value until the next point." },
new FaqItem { Question = "Which one should I use?", Answer = "Use straight lines for general trends, spline when the data changes smoothly, and step when values stay constant between changes." }
},
Tags = new [] { "chart", "interpolation", "spline", "step" }
},
new Example
@@ -2350,14 +2411,25 @@ namespace RadzenBlazorDemos
Name = "Annotations",
Path = "chart-annotations",
Title = "Blazor Chart - Annotations | Free UI Components by Radzen",
Description = "This example demonstrates RadzenSeriesAnnotation.",
Description = "Add text callouts to specific points on a Blazor chart to flag an event, a peak, or a note.",
Related = new [] { "chart-reference-line", "chart-data-labels", "line-chart" },
Faq = new []
{
new FaqItem { Question = "When should I use chart annotations?", Answer = "To call out a specific point in context - a launch date on a sales line, or an anomaly worth explaining - without a separate caption." }
},
Tags = new [] { "chart", "annotation", "label" }
},
new Example
{
Name = "Data Labels",
Path = "chart-data-labels",
Description = "Radzen Blazor Chart data labels with configurable position, background chip, overlap hiding, display strategy and formatting.",
Description = "Print the value next to each point or bar on a Blazor chart, with position, formatting, and overlap handling.",
Related = new [] { "chart-series", "chart-tooltip", "column-chart" },
Faq = new []
{
new FaqItem { Question = "How do I show values on a chart?", Answer = "Add data labels to the series; each point then displays its value, with options for position, formatting, and a background chip." },
new FaqItem { Question = "How do I stop data labels from overlapping?", Answer = "Turn on overlap hiding so the chart drops labels that would collide, keeping the readable ones." }
},
Tags = new [] { "chart", "graph", "label", "data labels", "values", "format", "overlap" },
New = true
},
@@ -2366,7 +2438,12 @@ namespace RadzenBlazorDemos
Name = "Crosshair",
Path = "chart-crosshair",
Title = "Blazor Chart - Crosshair | Free UI Components by Radzen",
Description = "Per-axis opt-in crosshair that snaps to the nearest data point (or follows the cursor) and optionally shows a label with the formatted axis value.",
Description = "Add guide lines that track the cursor on a Blazor chart, snapping to the nearest point with an optional value label.",
Related = new [] { "chart-tooltip", "chart-sync", "line-chart" },
Faq = new []
{
new FaqItem { Question = "How do I add a crosshair to a chart?", Answer = "Enable the crosshair per axis; it then follows the cursor or snaps to the nearest data point, with an optional label showing the formatted value." }
},
Tags = new [] { "chart", "crosshair", "hover" },
New = true
},
@@ -2375,7 +2452,12 @@ namespace RadzenBlazorDemos
Name = "Styling Chart",
Path = "styling-chart",
Title = "Blazor Chart - Styling | Free UI Components by Radzen",
Description = "This example demonstrates different color schemes, custom colors and styling of Radzen Blazor Chart component.",
Description = "Restyle a Blazor chart with color schemes, custom series colors, fills, and fonts to match your theme.",
Related = new [] { "chart-series", "styling-gauge", "column-chart" },
Faq = new []
{
new FaqItem { Question = "How do I change a chart's colors?", Answer = "Pick a built-in color scheme or supply your own palette; you can also set a custom color per series." }
},
Tags = new [] { "chart", "graph", "styling" }
},
}
@@ -3580,6 +3662,15 @@ namespace RadzenBlazorDemos
return dataViz?.Children != null ? Collect(dataViz.Children).ToList() : Enumerable.Empty<Example>();
}
// The chart configuration/feature demos (axis, legend, tooltip, ...). Article-eligible for
// schema, but intentionally NOT part of the /charts gallery ItemList.
public IEnumerable<Example> GetChartConfigPages()
{
var dataViz = Examples.FirstOrDefault(c => c.Name == "Data Visualization");
var config = dataViz?.Children?.FirstOrDefault(c => c.Name == "Configuration");
return config?.Children?.Where(e => !string.IsNullOrEmpty(e.Path)) ?? Enumerable.Empty<Example>();
}
public string TitleFor(Example example)
{
if (example != null && example.Name != "Overview")

3
RadzenBlazorDemos/Services/SeoSchema.cs
View File

@@ -33,7 +33,8 @@ namespace RadzenBlazorDemos
}
var chartPaths = new HashSet<string>(
exampleService.GetChartPages().Select(p => p.Path?.TrimStart('/')),
exampleService.GetChartPages().Concat(exampleService.GetChartConfigPages())
.Select(p => p.Path?.TrimStart('/')),
StringComparer.OrdinalIgnoreCase);
if (!chartPaths.Contains(path))