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

47 lines
1.8 KiB
Plaintext

<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12">
<RadzenRow>
<RadzenColumn Size="12">
<RadzenChart Animate="true">
<RadzenColumnSeries FillMode="FillMode.Gradient" Data="@data" CategoryProperty="Month" ValueProperty="Value" Title="Monthly Profit and Loss"
FillRange="@fillRange">
</RadzenColumnSeries>
<RadzenColumnOptions Radius="0" />
<RadzenValueAxis>
<RadzenGridLines Visible="true" />
</RadzenValueAxis>
<RadzenLegend Visible="false" />
</RadzenChart>
</RadzenColumn>
</RadzenRow>
</RadzenStack>
@code {
class ProfitLossData
{
public string Month { get; set; }
public double Value { get; set; }
}
ProfitLossData[] data = new[]
{
new ProfitLossData { Month = "Jan", Value = 200 },
new ProfitLossData { Month = "Feb", Value = -800 },
new ProfitLossData { Month = "Mar", Value = -1200 },
new ProfitLossData { Month = "Apr", Value = -2500 },
new ProfitLossData { Month = "May", Value = -300 },
new ProfitLossData { Month = "Jun", Value = 600 },
new ProfitLossData { Month = "Jul", Value = 3800 },
new ProfitLossData { Month = "Aug", Value = 3200 },
new ProfitLossData { Month = "Sep", Value = 2800 },
new ProfitLossData { Month = "Oct", Value = 3500 },
new ProfitLossData { Month = "Nov", Value = 3000 },
new ProfitLossData { Month = "Dec", Value = 3600 },
};
List<SeriesColorRange> fillRange = new()
{
new SeriesColorRange { Min = -10000, Max = 0, Color = "var(--rz-danger)" },
new SeriesColorRange { Min = 0, Max = 10000, Color = "var(--rz-success)" },
};
}