Files
radzen-blazor/RadzenBlazorDemos/Pages/StepAreaChartConfig.razor
2026-06-15 18:45:54 +03:00

38 lines
1.5 KiB
Plaintext

<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12">
<RadzenRow>
<RadzenColumn Size="12">
<RadzenChart Animate="true">
<RadzenAreaSeries FillMode="FillMode.Gradient" Data="@revenue2025" CategoryProperty="Quarter" Title="2025" ValueProperty="Revenue" Interpolation="Interpolation.Step" />
<RadzenAreaSeries FillMode="FillMode.Gradient" Data="@revenue2026" CategoryProperty="Quarter" Title="2026" ValueProperty="Revenue" Interpolation="Interpolation.Step" />
<RadzenCategoryAxis Padding="20" />
<RadzenValueAxis>
<RadzenGridLines Visible="true" />
<RadzenAxisTitle Text="Revenue" />
</RadzenValueAxis>
</RadzenChart>
</RadzenColumn>
</RadzenRow>
</RadzenStack>
@code {
class DataItem
{
public string Quarter { get; set; }
public double Revenue { get; set; }
}
DataItem[] revenue2025 = new DataItem[] {
new DataItem { Quarter = "Q1", Revenue = 234000 },
new DataItem { Quarter = "Q2", Revenue = 284000 },
new DataItem { Quarter = "Q3", Revenue = 274000 },
new DataItem { Quarter = "Q4", Revenue = 294000 },
};
DataItem[] revenue2026 = new DataItem[] {
new DataItem { Quarter = "Q1", Revenue = 254000 },
new DataItem { Quarter = "Q2", Revenue = 324000 },
new DataItem { Quarter = "Q3", Revenue = 354000 },
new DataItem { Quarter = "Q4", Revenue = 394000 },
};
}