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

54 lines
2.2 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" 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>
</RadzenCard>
<RadzenRow>
<RadzenColumn Size="12">
<RadzenChart Animate="true">
<RadzenWaterfallSeries Data="@cashFlow" CategoryProperty="Label" ValueProperty="Amount"
SummaryProperty="IsTotal" Title="Cash Flow" FillMode="@fillMode"
PositiveFill="#26A69A" NegativeFill="#EF5350" SummaryFill="#42A5F5" />
<RadzenColumnOptions Radius="3" />
<RadzenCategoryAxis />
<RadzenValueAxis>
<RadzenGridLines Visible="true" />
<RadzenAxisTitle Text="Amount ($)" />
</RadzenValueAxis>
</RadzenChart>
</RadzenColumn>
</RadzenRow>
</RadzenStack>
@code {
FillMode fillMode = FillMode.Gradient;
class DataItem
{
public string Label { get; set; }
public double Amount { get; set; }
public bool IsTotal { get; set; }
}
DataItem[] cashFlow = new DataItem[]
{
new DataItem { Label = "Revenue", Amount = 420 },
new DataItem { Label = "Services", Amount = 210 },
new DataItem { Label = "COGS", Amount = -170 },
new DataItem { Label = "Gross Profit", Amount = 0, IsTotal = true },
new DataItem { Label = "Salaries", Amount = -200 },
new DataItem { Label = "Marketing", Amount = -80 },
new DataItem { Label = "R&D", Amount = -50 },
new DataItem { Label = "Net Income", Amount = 0, IsTotal = true },
};
}