<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12" AlignItems="AlignItems.Center">
    <RadzenCard Variant="Variant.Outlined" Style="width: 100%;">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" Wrap="FlexWrap.Wrap">
            <RadzenCheckBox @bind-Value="@showDataLabels" Name="dataLabels"></RadzenCheckBox>
            <RadzenLabel Text="Show Data Labels" Component="dataLabels" />
        </RadzenStack>
    </RadzenCard>

    <RadzenStack Style="width: 100%; max-width: 600px;">
        <RadzenChart>
            <RadzenDonutSeries Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue" TotalAngle="180" StartAngle="180">
                <ChildContent>
                    <RadzenSeriesDataLabels Visible="@showDataLabels" />
                </ChildContent>
                <TitleTemplate>
                    <div class="rz-donut-content">
                        <div>Revenue</div>
                        <div>for 2024</div>
                    </div>
                </TitleTemplate>
            </RadzenDonutSeries>
        </RadzenChart>
    </RadzenStack>
</RadzenStack>

@code {
    bool showDataLabels = false;

    class DataItem
    {
        public string Quarter { get; set; }
        public double Revenue { get; set; }
    }

    DataItem[] revenue = new DataItem[] {
    new DataItem
    {
    Quarter = "Q1",
    Revenue = 30000
    },
    new DataItem
    {
    Quarter = "Q2",
    Revenue = 40000
    },
    new DataItem
    {
    Quarter = "Q3",
    Revenue = 50000
    },
    new DataItem
    {
    Quarter = "Q4",
    Revenue = 80000
    },
    };
}