<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12">
    <RadzenCard Variant="Variant.Outlined">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
            <RadzenLabel Text="Fill" Component="fillMode" />
            <RadzenSelectBar @bind-Value="@fillMode" TValue="FillMode" Size="ButtonSize.Small" Name="fillMode">
                <Items>
                    <RadzenSelectBarItem Value="FillMode.Gradient" Text="Gradient" />
                    <RadzenSelectBarItem Value="FillMode.Solid" Text="Solid" />
                    <RadzenSelectBarItem Value="FillMode.None" Text="None" />
                </Items>
            </RadzenSelectBar>
        </RadzenStack>
    </RadzenCard>

    <RadzenRow>
        <RadzenColumn Size="12">
            <RadzenChart Animate="true">
                <RadzenRangeAreaSeries Data="@temperatureData" CategoryProperty="Month"
                    MinProperty="Low" MaxProperty="High" Title="Temperature Range"
                    StrokeWidth="2" Smooth="true" FillMode="@fillMode" />
                <RadzenCategoryAxis />
                <RadzenValueAxis>
                    <RadzenGridLines Visible="true" />
                    <RadzenAxisTitle Text="Temperature (°C)" />
                </RadzenValueAxis>
            </RadzenChart>
        </RadzenColumn>
    </RadzenRow>
</RadzenStack>

@code {
    FillMode fillMode = FillMode.Gradient;

    class DataItem
    {
        public string Month { get; set; }
        public double Low { get; set; }
        public double High { get; set; }
    }

    DataItem[] temperatureData = new DataItem[]
    {
        new DataItem { Month = "Jan", Low = -3, High = 5 },
        new DataItem { Month = "Feb", Low = -2, High = 7 },
        new DataItem { Month = "Mar", Low = 1, High = 12 },
        new DataItem { Month = "Apr", Low = 5, High = 17 },
        new DataItem { Month = "May", Low = 9, High = 22 },
        new DataItem { Month = "Jun", Low = 13, High = 26 },
        new DataItem { Month = "Jul", Low = 15, High = 29 },
        new DataItem { Month = "Aug", Low = 14, High = 28 },
        new DataItem { Month = "Sep", Low = 11, High = 24 },
        new DataItem { Month = "Oct", Low = 7, High = 18 },
        new DataItem { Month = "Nov", Low = 2, High = 11 },
        new DataItem { Month = "Dec", Low = -1, High = 6 },
    };
}
