Files
radzen-blazor/RadzenBlazorDemos/Pages/PyramidChartConfig.razor

50 lines
2.3 KiB
Plaintext

<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12">
<RadzenCard Variant="Variant.Outlined">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
<RadzenCheckBox @bind-Value="inverted" Name="inverted" />
<RadzenLabel Text="Inverted" Component="inverted" />
</RadzenStack>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
<RadzenLabel Text="Fill" Component="fillMode" />
<RadzenSelectBar @bind-Value="@fillMode" TValue="FillMode" Size="ButtonSize.Small" Name="fillMode">
<Items>
<RadzenSelectBarItem Value="FillMode.Gradient" Text="Gradient" />
<RadzenSelectBarItem Value="FillMode.Solid" Text="Solid" />
<RadzenSelectBarItem Value="FillMode.None" Text="None" />
</Items>
</RadzenSelectBar>
</RadzenStack>
</RadzenStack>
</RadzenCard>
<RadzenChart Animate="true" Style="width: 100%; height: 500px;">
<RadzenPyramidSeries Data="@levels" CategoryProperty="Level" ValueProperty="Count"
Inverted="@inverted" FillMode="@fillMode"
StrokeWidth="1" Strokes="@(new[] { "var(--rz-base-background-color)", "var(--rz-base-background-color)", "var(--rz-base-background-color)", "var(--rz-base-background-color)", "var(--rz-base-background-color)" })">
<RadzenSeriesDataLabels Visible="true" />
</RadzenPyramidSeries>
<RadzenLegend Position="LegendPosition.Right" />
</RadzenChart>
</RadzenStack>
@code {
bool inverted;
FillMode fillMode = FillMode.Gradient;
class PyramidData
{
public string Level { get; set; } = "";
public double Count { get; set; }
}
PyramidData[] levels = new[]
{
new PyramidData { Level = "Physiological", Count = 1000 },
new PyramidData { Level = "Safety", Count = 600 },
new PyramidData { Level = "Love & Belonging", Count = 350 },
new PyramidData { Level = "Esteem", Count = 150 },
new PyramidData { Level = "Self-actualization", Count = 50 },
};
}