<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 },
    };
}
