mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-07-08 18:16:08 +00:00
63 lines
2.9 KiB
Plaintext
63 lines
2.9 KiB
Plaintext
@using System.Globalization
|
|
|
|
<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12">
|
|
<RadzenCard Variant="Variant.Outlined">
|
|
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Gap="2rem" Wrap="FlexWrap.Wrap">
|
|
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1.5rem">
|
|
<RadzenLabel Text="Rotation" Component="rotation" Style="width: 60px" class="rz-text-align-end" />
|
|
<RadzenSlider @bind-Value="@rotation" Name="rotation" Min="-90" Max="90" />
|
|
<RadzenText Style="width: 60px">@(rotation)<sup>°</sup></RadzenText>
|
|
</RadzenStack>
|
|
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1.5rem">
|
|
<RadzenLabel Text="Width" Component="width" Style="width: 60px" class="rz-text-align-end" />
|
|
<RadzenSlider @bind-Value="@width" Name="width" Min="600" Max="1200" />
|
|
<RadzenText Style="width: 60px">@(width)px</RadzenText>
|
|
</RadzenStack>
|
|
</RadzenStack>
|
|
</RadzenCard>
|
|
|
|
<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center">
|
|
<RadzenChart style="@($"width: {width}px")">
|
|
<RadzenAreaSeries FillMode="FillMode.Gradient" Smooth="true" Data="@revenue2024" CategoryProperty="Date" Title="2024" ValueProperty="Revenue">
|
|
<RadzenSeriesDataLabels Visible="@showDataLabels" />
|
|
</RadzenAreaSeries>
|
|
<RadzenCategoryAxis Padding="20" LabelAutoRotation="@rotation" />
|
|
<RadzenValueAxis Formatter="@FormatAsUSD">
|
|
<RadzenGridLines Visible="true" />
|
|
<RadzenAxisTitle Text="Revenue in USD" />
|
|
</RadzenValueAxis>
|
|
</RadzenChart>
|
|
</RadzenStack>
|
|
</RadzenStack>
|
|
|
|
@code {
|
|
double rotation = -45;
|
|
bool showDataLabels = false;
|
|
double width = 600;
|
|
|
|
class DataItem
|
|
{
|
|
public string Date { get; set; }
|
|
public double Revenue { get; set; }
|
|
}
|
|
|
|
string FormatAsUSD(object value)
|
|
{
|
|
return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US"));
|
|
}
|
|
|
|
DataItem[] revenue2024 = new DataItem[] {
|
|
new DataItem { Date = "January", Revenue = 234000 },
|
|
new DataItem { Date = "February", Revenue = 269000 },
|
|
new DataItem { Date = "March", Revenue = 233000 },
|
|
new DataItem { Date = "April", Revenue = 244000 },
|
|
new DataItem { Date = "May", Revenue = 214000 },
|
|
new DataItem { Date = "June", Revenue = 253000 },
|
|
new DataItem { Date = "July", Revenue = 274000 },
|
|
new DataItem { Date = "August", Revenue = 284000 },
|
|
new DataItem { Date = "September", Revenue = 273000 },
|
|
new DataItem { Date = "October", Revenue = 282000 },
|
|
new DataItem { Date = "November", Revenue = 289000 },
|
|
new DataItem { Date = "December", Revenue = 294000 }
|
|
};
|
|
} |