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

Update demos

Browse Source
This commit is contained in:
yordanov
2026-06-24 19:23:08 +03:00
parent 6ebd2ea315
commit d0ca8c8911
20 changed files with 30 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
RadzenBlazorDemos/Pages/AreaChartConfig.razor
View File

@@ -21,6 +21,15 @@
</Items>
</RadzenSelectBar>
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
<RadzenLabel Text="Tick Placement" Component="tickPlacement" />
<RadzenSelectBar @bind-Value="@tickPlacement" TValue="TickPlacement" Size="ButtonSize.Small" Name="tickPlacement">
<Items>
<RadzenSelectBarItem Value="TickPlacement.Between" Text="Between" />
<RadzenSelectBarItem Value="TickPlacement.On" Text="On" />
</Items>
</RadzenSelectBar>
</RadzenStack>
</RadzenStack>
</RadzenCard>
@@ -31,7 +40,7 @@
<RadzenAreaSeries Smooth="@smooth" FillMode="@fillMode" Data="@revenue2024" CategoryProperty="Date" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue">
<RadzenSeriesDataLabels Visible="@showDataLabels" />
</RadzenAreaSeries>
<RadzenCategoryAxis Padding="20" LabelAutoRotation="-45" />
<RadzenCategoryAxis LabelAutoRotation="-45" TickPlacement="@tickPlacement" />
<RadzenValueAxis Formatter="@FormatAsUSD">
<RadzenGridLines Visible="true" LineType="LineType.Dashed" />
<RadzenAxisTitle Text="Revenue in USD" />
@@ -43,6 +52,7 @@
bool smooth = true;
bool showDataLabels = false;
FillMode fillMode = FillMode.Gradient;
TickPlacement tickPlacement = TickPlacement.Between;
class DataItem
{
public string Date { get; set; }

12
RadzenBlazorDemos/Pages/BarChartConfig.razor
View File

@@ -31,15 +31,6 @@
</Items>
</RadzenSelectBar>
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
<RadzenLabel Text="Tick Placement" Component="tickPlacement" />
<RadzenSelectBar @bind-Value="@tickPlacement" TValue="TickPlacement" Size="ButtonSize.Small" Name="tickPlacement">
<Items>
<RadzenSelectBarItem Value="TickPlacement.Between" Text="Between" />
<RadzenSelectBarItem Value="TickPlacement.On" Text="On" />
</Items>
</RadzenSelectBar>
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
<RadzenLabel Text="Max Height" Component="maxHeight" />
<RadzenNumeric @bind-Value="@maxHeight" Min="0" Max="200" Step="10" Style="width: 90px" Name="maxHeight" />
@@ -60,7 +51,7 @@
<RadzenBarSeries FillMode="@fillMode" Data="@revenue2023" CategoryProperty="Quarter" Title="2023" ValueProperty="Revenue">
<RadzenSeriesDataLabels Visible="@showDataLabels" Position="@labelPosition" />
</RadzenBarSeries>
<RadzenCategoryAxis TickPlacement="@tickPlacement" />
<RadzenCategoryAxis />
<RadzenValueAxis Formatter="@FormatAsUSD">
<RadzenGridLines Visible="true" />
<RadzenAxisTitle Text="Revenue in USD" />
@@ -94,7 +85,6 @@
bool showDataLabels = false;
DataLabelPosition labelPosition = DataLabelPosition.Auto;
FillMode fillMode = FillMode.Gradient;
TickPlacement tickPlacement = TickPlacement.Between;
double maxHeight = 0;
double categoryGap = 0;

12
RadzenBlazorDemos/Pages/ColumnChartConfig.razor
View File

@@ -31,15 +31,6 @@
</Items>
</RadzenSelectBar>
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
<RadzenLabel Text="Tick Placement" Component="tickPlacement" />
<RadzenSelectBar @bind-Value="@tickPlacement" TValue="TickPlacement" Size="ButtonSize.Small" Name="tickPlacement">
<Items>
<RadzenSelectBarItem Value="TickPlacement.Between" Text="Between" />
<RadzenSelectBarItem Value="TickPlacement.On" Text="On" />
</Items>
</RadzenSelectBar>
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
<RadzenLabel Text="Max Width" Component="maxWidth" />
<RadzenNumeric @bind-Value="@maxWidth" Min="0" Max="200" Step="10" Style="width: 90px" Name="maxWidth" />
@@ -61,7 +52,7 @@
<RadzenSeriesDataLabels Visible="@showDataLabels" Position="@labelPosition" />
</RadzenColumnSeries>
<RadzenColumnOptions Radius="5" MaxWidth="@(maxWidth > 0 ? maxWidth : null)" CategoryGap="@(categoryGap > 0 ? categoryGap : null)" />
<RadzenCategoryAxis TickPlacement="@tickPlacement" />
<RadzenCategoryAxis />
<RadzenValueAxis Formatter="@FormatAsUSD">
<RadzenGridLines Visible="true" />
<RadzenAxisTitle Text="Revenue in USD" />
@@ -111,7 +102,6 @@
bool showDataLabels = false;
DataLabelPosition labelPosition = DataLabelPosition.Auto;
FillMode fillMode = FillMode.Gradient;
TickPlacement tickPlacement = TickPlacement.Between;
double maxWidth = 0;
double categoryGap = 0;

2
RadzenBlazorDemos/Pages/DonutChartBasic.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenDonutSeries Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenDonutSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/DonutChartCornerRadius.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenDonutSeries Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" CornerRadius="10">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenDonutSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/DonutChartCustomColors.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenDonutSeries Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" Fills="@palette" FillMode="FillMode.Solid">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenDonutSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/DonutChartExplode.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenDonutSeries FillMode="FillMode.Gradient" Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" ExplodeOffset="15" ExplodedProperty="Highlight">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenDonutSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/DonutChartInnerRadius.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenDonutSeries Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" InnerRadius="50">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenDonutSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/DonutChartLabels.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenDonutSeries Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" ShowTooltipOnLegend="true">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="true" Position="DataLabelPosition.Inside" />
</RadzenDonutSeries>
<RadzenLegend Position="LegendPosition.Right" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/DonutChartSegmentGap.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenDonutSeries FillMode="FillMode.Gradient" Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" SegmentGap="4">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenDonutSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/DonutChartSemiCircle.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenDonutSeries Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" StartAngle="180" TotalAngle="180">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenDonutSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/DonutChartVariousRadius.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenDonutSeries FillMode="FillMode.Gradient" Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" RadiusProperty="Radius">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenDonutSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/PieChartBasic.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenPieSeries Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenPieSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/PieChartCornerRadius.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenPieSeries Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" CornerRadius="10">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenPieSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/PieChartCustomColors.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenPieSeries Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" Fills="@palette" FillMode="FillMode.Solid">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenPieSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/PieChartExplode.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenPieSeries FillMode="FillMode.Gradient" Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" ExplodeOffset="15" ExplodedProperty="Highlight">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenPieSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/PieChartLabels.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenPieSeries Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" ShowTooltipOnLegend="true">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="true" Position="DataLabelPosition.Inside" />
</RadzenPieSeries>
<RadzenLegend Position="LegendPosition.Right" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/PieChartSegmentGap.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenPieSeries FillMode="FillMode.Gradient" Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" SegmentGap="4">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenPieSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/PieChartSemiCircle.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenPieSeries Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" StartAngle="180" TotalAngle="180">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenPieSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

2
RadzenBlazorDemos/Pages/PieChartVariousRadius.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Style="width: 100%; max-width: 600px;">
<RadzenChart>
<RadzenPieSeries FillMode="FillMode.Gradient" Data="@revenue" CategoryProperty="Category" ValueProperty="Value" Title="Revenue" RadiusProperty="Radius">
<RadzenSeriesDataLabels Visible="true" />
<RadzenSeriesDataLabels Visible="false" />
</RadzenPieSeries>
<RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>