mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-07-08 18:16:08 +00:00
59 lines
2.4 KiB
Plaintext
59 lines
2.4 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="invertValue" Name="invertValue" />
|
|
<RadzenLabel Text="Invert Value Axis" Component="invertValue" />
|
|
</RadzenStack>
|
|
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
|
|
<RadzenCheckBox @bind-Value="invertCategory" Name="invertCategory" />
|
|
<RadzenLabel Text="Invert Category Axis" Component="invertCategory" />
|
|
</RadzenStack>
|
|
</RadzenStack>
|
|
</RadzenCard>
|
|
<RadzenRow>
|
|
<RadzenColumn Size="12">
|
|
<RadzenChart Style="height: 400px">
|
|
<RadzenColumnSeries FillMode="FillMode.Gradient" Data="@data" CategoryProperty="Year" ValueProperty="Rate" Title="Exchange Rate"
|
|
Fills="@fills" Strokes="@fills" />
|
|
<RadzenCategoryAxis Inverted="@invertCategory" />
|
|
<RadzenValueAxis Inverted="@invertValue">
|
|
<RadzenGridLines Visible="true" />
|
|
</RadzenValueAxis>
|
|
<RadzenChartTooltipOptions Visible="true" />
|
|
<RadzenLegend Visible="false" />
|
|
</RadzenChart>
|
|
</RadzenColumn>
|
|
</RadzenRow>
|
|
</RadzenStack>
|
|
|
|
@code {
|
|
bool invertValue;
|
|
bool invertCategory = true;
|
|
|
|
string[] fills = new[]
|
|
{
|
|
"var(--rz-series-1)", "var(--rz-series-2)", "var(--rz-series-3)",
|
|
"var(--rz-series-4)", "var(--rz-series-5)", "var(--rz-series-6)",
|
|
"var(--rz-series-7)", "var(--rz-series-8)"
|
|
};
|
|
|
|
class ExchangeRate
|
|
{
|
|
public string Year { get; set; } = "";
|
|
public double Rate { get; set; }
|
|
}
|
|
|
|
ExchangeRate[] data = new ExchangeRate[]
|
|
{
|
|
new ExchangeRate { Year = "2022", Rate = 82.44 },
|
|
new ExchangeRate { Year = "2021", Rate = 73.22 },
|
|
new ExchangeRate { Year = "2020", Rate = 74.53 },
|
|
new ExchangeRate { Year = "2019", Rate = 69.92 },
|
|
new ExchangeRate { Year = "2018", Rate = 64.45 },
|
|
new ExchangeRate { Year = "2017", Rate = 67.07 },
|
|
new ExchangeRate { Year = "2016", Rate = 65.46 },
|
|
new ExchangeRate { Year = "2015", Rate = 61.14 },
|
|
};
|
|
}
|