@page "/charts"

<PageTitle>Blazor Charts - 30+ Chart Types | Free UI Components by Radzen</PageTitle>
<HeadContent>
    <meta name="description" content="40+ free Blazor data-visualization components, including 30+ chart types plus gauges, sparklines, treemap and Sankey. Drawn in C# as SVG, with no JavaScript charting library.">
    <meta name="author" content="Radzen">
    <meta property="og:title" content="Blazor Charts - 30+ Chart Types | Free UI Components by Radzen" />
    <meta property="og:description" content="40+ free Blazor data-visualization components, including 30+ chart types plus gauges, sparklines, treemap and Sankey. Drawn in C# as SVG, no JavaScript charting library." />
    <meta property="og:site_name" content="Radzen Blazor Components" />
    <meta property="og:image" content="https://blazor.radzen.com/images/radzen-og.png" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://blazor.radzen.com/charts" />
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:title" content="Blazor Charts - 30+ Chart Types | Free UI Components by Radzen" />
    <meta property="twitter:description" content="40+ free Blazor data-visualization components, including 30+ chart types plus gauges, sparklines, treemap and Sankey. Drawn in C# as SVG, no JavaScript charting library." />
</HeadContent>

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Blazor Chart Components
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4" Style="max-width: 1200px;">
    Explore 40+ free, open-source data-visualization components for Blazor - including 30+ chart types, from area and line charts to financial and statistical ones, plus gauges, sparklines, a treemap and a Sankey diagram. Every chart is drawn in C# as SVG, so it renders under static server-side rendering with no JavaScript charting library. Click any chart for a live demo.
</RadzenText>

<style>
    .chart-gallery .rz-link {
        --rz-link-text-decoration: none;
        --rz-link-hover-text-decoration: none;
        color: inherit;
        display: block;
        transition: transform 0.15s;
        
        .rz-card {
            transition: box-shadow 0.2s;
        }
    }

    .chart-gallery .rz-link:hover {
        transform: translateY(-2px);
        
        .rz-card {
            box-shadow: var(--rz-shadow-2);
        }
    }

    .chart-gallery .rz-card {
        height: 100%;
    }

    .chart-gallery-thumb {
        width: 100%;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .chart-gallery-thumb svg {
        width: 100%;
        height: 100%;
    }
</style>

@* --- Area Chart --- *@
<RadzenText Anchor="charts#area-chart" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-8 rz-pb-2">
    Area Chart
</RadzenText>
<RadzenRow Gap="2rem" RowGap="2rem" class="chart-gallery">
    @* Area Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/area-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Area chart thumbnail">
                        <path d="M20 93L36 87L52 71L68 80L84 65L100 76L116 55L132 64L148 47L164 52L180 39V112H20V93Z" fill="var(--rz-series-1)" fill-opacity="0.8"/>

                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Area</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Range Area Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/range-area-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Range Area chart thumbnail">
                        <path d="M180 75L164 84L148 73L132 92L116 78L100 98L84 83L68 95L52 89L36 98L20 96V93L36 87L52 71L68 80L84 65L100 76L116 55L132 64L148 47L164 52L180 39V75Z" fill="var(--rz-series-1)" fill-opacity="0.8"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Range Area <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Step Area Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/step-area-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Step Area chart thumbnail">
                        <path d="M20 93H36V87H52V71H68V80H84V65H100V76H116V55H132V64H148V47H164V44.5V39H180V112H20V93Z" fill="var(--rz-series-1)" fill-opacity="0.8"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Step Area <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Range Step Area Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/range-step-area-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Range Step Area chart thumbnail">
                        <path d="M180 84H164V73H148V92H132V78H116V98H100V83H84V95H68V89H52V98H36V96H20V93H36V87H52V71H68V80H84V65H100V76H116V55H132V64H148V47H164V39H180V84Z" fill="var(--rz-series-1)" fill-opacity="0.8"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Range Step Area <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Stacked Area Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/stacked-area-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Stacked Area chart thumbnail">
                        <path d="M180 75H179.984C179.823 75.0025 179.66 75.0443 179.51 75.1289L164.053 83.8223L147.819 72.6621L131.891 91.5762L115.872 77.5596L99.8936 97.5303L84.0713 82.6963L67.8389 94.8711L52.3516 89.0635L51.915 88.9004L51.5098 89.1289L35.7969 97.9668L20.124 96.0078C20.0896 96.0035 20.0554 96.0008 20.0215 96H20V93L36 87L52 71L68 80L84 65L100 76L116 55L132 64L148 47L164 52L180 39V75Z" fill="var(--rz-series-1)" fill-opacity="0.8"/>
                        <path d="M163.947 86.1768L180 77.1465V112H20V98.0068L36.2031 100.033L36.4902 99.8711L52.083 91.0996L68.1621 97.1289L68.5996 96.7998L83.9277 85.3027L100.105 100.47L116.128 80.4404L132.108 94.4238L148.181 75.3379L163.947 86.1768Z" fill="var(--rz-series-2)" fill-opacity="0.8"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Stacked Area</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Full Stacked Area Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/100-percent-stacked-area-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Full Stacked Area chart thumbnail">
                        <path d="M163.947 86.1768L180 77.1465V112H20V98.0068L36.2031 100.033L36.4902 99.8711L52.083 91.0996L68.1621 97.1289L68.5996 96.7998L83.9277 85.3027L100.105 100.47L116.128 80.4404L132.108 94.4238L148.181 75.3379L163.947 86.1768Z" fill="var(--rz-series-3)" fill-opacity="0.8"/>
                        <path d="M180 75H179.984C179.823 75.0025 179.66 75.0443 179.51 75.1289L164.053 83.8223L147.819 72.6621L131.891 91.5762L115.872 77.5596L99.8936 97.5303L84.0713 82.6963L67.8389 94.8711L52.3516 89.0635L51.915 88.9004L51.5098 89.1289L35.7969 97.9668L20.124 96.0078C20.0896 96.0035 20.0554 96.0008 20.0215 96H20V93.999C20.1169 93.9991 20.2357 93.9799 20.3516 93.9365L36.3516 87.9365L36.5537 87.8604L52.1709 72.2422L67.5098 80.8711L68.1484 81.2314L84.0957 66.2793L100.219 77.3633L116.269 56.2979L132.191 65.2549L132.729 64.6855L148.3 48.1406L164.214 53.1143L164.631 52.7764L180 40.2881V75Z" fill="var(--rz-series-2)" fill-opacity="0.8"/>
                        <path d="M180 38C179.778 38 179.555 38.073 179.369 38.2236L163.784 50.8848L148.298 46.0459L147.701 45.8584L131.807 62.7441L115.731 53.7021L99.7812 74.6357L83.9033 63.7197L67.8506 78.7686L51.8291 69.7568L35.4463 86.1387L20 91.9307V20H180V38Z" fill="var(--rz-series-1)" fill-opacity="0.8"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Full Stacked Area <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Area Negative Points *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/negative-area-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Area Negative Points chart thumbnail">
                        <path d="M20 80L36 96L52 40L68 100L84 48L100 36L116 88L132 92L148 40L164 88L180 32V65H20L20 80Z" fill="var(--rz-series-1)" fill-opacity="0.8"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Area Negative Points <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>
</RadzenRow>

@* --- Bar Chart --- *@
<RadzenText Anchor="charts#bar-chart" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-8 rz-pb-2">
    Bar Chart
</RadzenText>
<RadzenRow Gap="2rem" RowGap="2rem" class="chart-gallery">
    @* Bar Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/bar-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Bar chart thumbnail">
                        <path d="M106 32C107.105 32 108 31.1046 108 30L108 22C108 20.8954 107.105 20 106 20L20 20L20 32L106 32Z" fill="var(--rz-series-1)"/>
                        <path d="M145 48C146.105 48 147 47.1046 147 46L147 38C147 36.8954 146.105 36 145 36L20 36L20 48L145 48Z" fill="var(--rz-series-1)"/>
                        <path d="M89 64C90.1046 64 91 63.1046 91 62L91 54C91 52.8954 90.1046 52 89 52L20 52L20 64L89 64Z" fill="var(--rz-series-1)"/>
                        <path d="M123 80C124.105 80 125 79.1046 125 78L125 70C125 68.8954 124.105 68 123 68L20 68L20 80L123 80Z" fill="var(--rz-series-1)"/>
                        <path d="M106 96C107.105 96 108 95.1046 108 94L108 86C108 84.8954 107.105 84 106 84L20 84L20 96L106 96Z" fill="var(--rz-series-1)"/>
                        <path d="M86 112C87.1046 112 88 111.105 88 110L88 102C88 100.895 87.1046 100 86 100L20 100L20 112L86 112Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Bar</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Range Bar Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/range-bar-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Range Bar chart thumbnail">
                        <path d="M142 32C143.105 32 144 31.1046 144 30L144 22C144 20.8954 143.105 20 142 20L58 20C56.8954 20 56 20.8954 56 22L56 30C56 31.1046 56.8954 32 58 32L142 32Z" fill="var(--rz-series-1)"/>
                        <path d="M169 48C170.105 48 171 47.1046 171 46L171 38C171 36.8954 170.105 36 169 36L46 36C44.8954 36 44 36.8954 44 38L44 46C44 47.1046 44.8954 48 46 48L169 48Z" fill="var(--rz-series-1)"/>
                        <path d="M122 64C123.105 64 124 63.1046 124 62L124 54C124 52.8954 123.105 52 122 52L55 52C53.8954 52 53 52.8954 53 54L53 62C53 63.1046 53.8954 64 55 64L122 64Z" fill="var(--rz-series-1)"/>
                        <path d="M133 80C134.105 80 135 79.1046 135 78L135 70C135 68.8954 134.105 68 133 68L32 68C30.8954 68 30 68.8954 30 70L30 78C30 79.1046 30.8954 80 32 80L133 80Z" fill="var(--rz-series-1)"/>
                        <path d="M150 96C151.105 96 152 95.1046 152 94L152 86C152 84.8954 151.105 84 150 84L66 84C64.8954 84 64 84.8954 64 86L64 94C64 95.1046 64.8954 96 66 96L150 96Z" fill="var(--rz-series-1)"/>
                        <path d="M109 112C110.105 112 111 111.105 111 110L111 102C111 100.895 110.105 100 109 100L45 100C43.8954 100 43 100.895 43 102L43 110C43 111.105 43.8954 112 45 112L109 112Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Range Bar <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Stacked Bar Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/stacked-bar-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Stacked Bar chart thumbnail">
                        <path d="M85 32V20L20 20L20 32L85 32Z" fill="var(--rz-series-1)"/>
                        <path d="M106 32C107.105 32 108 31.1046 108 30V22C108 20.8954 107.105 20 106 20L85 20L85 32L106 32Z" fill="var(--rz-series-2)"/>
                        <path d="M94 48V36L20 36L20 48L94 48Z" fill="var(--rz-series-1)"/>
                        <path d="M145 48C146.105 48 147 47.1046 147 46V38C147 36.8954 146.105 36 145 36L94 36L94 48L145 48Z" fill="var(--rz-series-2)"/>
                        <path d="M53 64V52L20 52L20 64L53 64Z" fill="var(--rz-series-1)"/>
                        <path d="M89 64C90.1046 64 91 63.1046 91 62V54C91 52.8954 90.1046 52 89 52L53 52L53 64L89 64Z" fill="var(--rz-series-2)"/>
                        <path d="M79 80V68L20 68L20 80L79 80Z" fill="var(--rz-series-1)"/>
                        <path d="M123 80C124.105 80 125 79.1046 125 78V70C125 68.8954 124.105 68 123 68L79 68L79 80L123 80Z" fill="var(--rz-series-2)"/>
                        <path d="M88 96V84L20 84L20 96L88 96Z" fill="var(--rz-series-1)"/>
                        <path d="M106 96C107.105 96 108 95.1046 108 94V86C108 84.8954 107.105 84 106 84L88 84L88 96L106 96Z" fill="var(--rz-series-2)"/>
                        <path d="M66 112V100L20 100L20 112L66 112Z" fill="var(--rz-series-1)"/>
                        <path d="M86 112C87.1046 112 88 111.105 88 110V102C88 100.895 87.1046 100 86 100L66 100L66 112L86 112Z" fill="var(--rz-series-2)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Stacked Bar</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Full Stacked Bar Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/100-percent-stacked-bar-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Full Stacked Bar chart thumbnail">
                        <path d="M87 32V20L20 20L20 32L87 32Z" fill="var(--rz-series-1)"/>
                        <path d="M180 32V20L110 20L110 32L180 32Z" fill="var(--rz-series-3)"/>
                        <path d="M180 48V36L149 36L149 48L180 48Z" fill="var(--rz-series-3)"/>
                        <path d="M180 64V52L93 52L93 64L180 64Z" fill="var(--rz-series-3)"/>
                        <path d="M180 80V68L127 68L127 80L180 80Z" fill="var(--rz-series-3)"/>
                        <path d="M180 96V84L110 84L110 96L180 96Z" fill="var(--rz-series-3)"/>
                        <path d="M180 112V100L90 100L90 112L180 112Z" fill="var(--rz-series-3)"/>
                        <path d="M110 32V20L87 20L87 32L110 32Z" fill="var(--rz-series-2)"/>
                        <path d="M96 48V36L20 36L20 48L96 48Z" fill="var(--rz-series-1)"/>
                        <path d="M149 48V36L96 36L96 48L149 48Z" fill="var(--rz-series-2)"/>
                        <path d="M55 64V52L20 52L20 64L55 64Z" fill="var(--rz-series-1)"/>
                        <path d="M93 64V52L55 52L55 64L93 64Z" fill="var(--rz-series-2)"/>
                        <path d="M81 80V68L20 68L20 80L81 80Z" fill="var(--rz-series-1)"/>
                        <path d="M127 80V68L81 68L81 80L127 80Z" fill="var(--rz-series-2)"/>
                        <path d="M90 96V84L20 84L20 96L90 96Z" fill="var(--rz-series-1)"/>
                        <path d="M110 96V84L90 84L90 96L110 96Z" fill="var(--rz-series-2)"/>
                        <path d="M68 112V100L20 100L20 112L68 112Z" fill="var(--rz-series-1)"/>
                        <path d="M90 112V100L68 100L68 112L90 112Z" fill="var(--rz-series-2)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Full Stacked Bar <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Negative Stacked Bar *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/negative-stacked-bar-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Negative Stacked Bar chart thumbnail">
                        <path d="M100 32V20L39 20C37.8954 20 37 20.8954 37 22L37 30C37 31.1046 37.8954 32 39 32L100 32Z" fill="var(--rz-series-1)"/>
                        <path d="M141 32C142.105 32 143 31.1046 143 30V22C143 20.8954 142.105 20 141 20L100 20L100 32L141 32Z" fill="var(--rz-series-2)"/>
                        <path d="M100 48V36L54 36C52.8954 36 52 36.8954 52 38L52 46C52 47.1046 52.8954 48 54 48L100 48Z" fill="var(--rz-series-1)"/>
                        <path d="M171 48C172.105 48 173 47.1046 173 46V38C173 36.8954 172.105 36 171 36L100 36L100 48L171 48Z" fill="var(--rz-series-2)"/>
                        <path d="M100 64V52L71 52C69.8954 52 69 52.8954 69 54L69 62C69 63.1046 69.8954 64 71 64L100 64Z" fill="var(--rz-series-1)"/>
                        <path d="M156 64C157.105 64 158 63.1046 158 62V54C158 52.8954 157.105 52 156 52L100 52L100 64L156 64Z" fill="var(--rz-series-2)"/>
                        <path d="M100 80V68L45 68C43.8954 68 43 68.8954 43 70L43 78C43 79.1046 43.8954 80 45 80L100 80Z" fill="var(--rz-series-1)"/>
                        <path d="M128 80C129.105 80 130 79.1046 130 78V70C130 68.8954 129.105 68 128 68L100 68L100 80L128 80Z" fill="var(--rz-series-2)"/>
                        <path d="M100 96V84L36 84C34.8954 84 34 84.8954 34 86L34 94C34 95.1046 34.8954 96 36 96L100 96Z" fill="var(--rz-series-1)"/>
                        <path d="M138 96C139.105 96 140 95.1046 140 94V86C140 84.8954 139.105 84 138 84L100 84L100 96L138 96Z" fill="var(--rz-series-2)"/>
                        <path d="M100 112V100L58 100C56.8954 100 56 100.895 56 102L56 110C56 111.105 56.8954 112 58 112L100 112Z" fill="var(--rz-series-1)"/>
                        <path d="M140 112C141.105 112 142 111.105 142 110V102C142 100.895 141.105 100 140 100L100 100L100 112L140 112Z" fill="var(--rz-series-2)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Negative Stacked Bar <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>
</RadzenRow>

@* --- Column Chart --- *@
<RadzenText Anchor="charts#column-chart" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-8 rz-pb-2">
    Column Chart
</RadzenText>
<RadzenRow Gap="2rem" RowGap="2rem" class="chart-gallery">
    @* Column Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/column-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Column chart thumbnail">
                        <path d="M156 39C156 37.8954 156.895 37 158 37H168C169.105 37 170 37.8954 170 39V112H156V39Z" fill="var(--rz-series-1)"/>
                        <path d="M138 59C138 57.8954 138.895 57 140 57H150C151.105 57 152 57.8954 152 59V112H138V59Z" fill="var(--rz-series-1)"/>
                        <path d="M120 56C120 54.8954 120.895 54 122 54H132C133.105 54 134 54.8954 134 56V112H120V56Z" fill="var(--rz-series-1)"/>
                        <path d="M102 85C102 83.8954 102.895 83 104 83H114C115.105 83 116 83.8954 116 85V112H102V85Z" fill="var(--rz-series-1)"/>
                        <path d="M84 68C84 66.8954 84.8954 66 86 66H96C97.1046 66 98 66.8954 98 68V112H84V68Z" fill="var(--rz-series-1)"/>
                        <path d="M66 95C66 93.8954 66.8954 93 68 93H78C79.1046 93 80 93.8954 80 95V112H66V95Z" fill="var(--rz-series-1)"/>
                        <path d="M48 72C48 70.8954 48.8954 70 50 70H60C61.1046 70 62 70.8954 62 72V112H48V72Z" fill="var(--rz-series-1)"/>
                        <path d="M30 79C30 77.8954 30.8954 77 32 77H42C43.1046 77 44 77.8954 44 79V112H30V79Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Column</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Range Column Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/range-column-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Range Column chart thumbnail">
                        <rect x="156" y="29" width="14" height="75" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="138" y="41" width="14" height="55" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="120" y="32" width="14" height="58" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="102" y="44" width="14" height="29" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="84" y="40" width="14" height="46" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="66" y="61" width="14" height="19" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="48" y="51" width="14" height="42" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="30" y="51" width="14" height="35" rx="2" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Range Column <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Stacked Column Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/stacked-column-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Stacked Column chart thumbnail">
                        <path d="M30 93H44V112H30L30 93Z" fill="var(--rz-series-1)"/>
                        <path d="M48 91H62V112H48L48 91Z" fill="var(--rz-series-1)"/>
                        <path d="M84 91H98V112H84L84 91Z" fill="var(--rz-series-1)"/>
                        <path d="M120 91H134V112H120L120 91Z" fill="var(--rz-series-1)"/>
                        <path d="M66 103H80V112H66L66 103Z" fill="var(--rz-series-1)"/>
                        <path d="M102 103H116V112H102L102 103Z" fill="var(--rz-series-1)"/>
                        <path d="M138 75H152V112H138L138 75Z" fill="var(--rz-series-1)"/>
                        <path d="M156 66H170V112H156L156 66Z" fill="var(--rz-series-1)"/>
                        <path d="M30 79C30 77.8954 30.8954 77 32 77H42C43.1046 77 44 77.8954 44 79V93H30V79Z" fill="var(--rz-series-2)"/>
                        <path d="M48 72C48 70.8954 48.8954 70 50 70H60C61.1046 70 62 70.8954 62 72V91H48V72Z" fill="var(--rz-series-2)"/>
                        <path d="M84 68C84 66.8954 84.8954 66 86 66H96C97.1046 66 98 66.8954 98 68V91H84V68Z" fill="var(--rz-series-2)"/>
                        <path d="M120 56C120 54.8954 120.895 54 122 54H132C133.105 54 134 54.8954 134 56V91H120V56Z" fill="var(--rz-series-2)"/>
                        <path d="M66 95C66 93.8954 66.8954 93 68 93H78C79.1046 93 80 93.8954 80 95V103H66V95Z" fill="var(--rz-series-2)"/>
                        <path d="M102 85C102 83.8954 102.895 83 104 83H114C115.105 83 116 83.8954 116 85V103H102V85Z" fill="var(--rz-series-2)"/>
                        <path d="M138 59C138 57.8954 138.895 57 140 57H150C151.105 57 152 57.8954 152 59V75H138V59Z" fill="var(--rz-series-2)"/>
                        <path d="M156 39C156 37.8954 156.895 37 158 37H168C169.105 37 170 37.8954 170 39V66H156V39Z" fill="var(--rz-series-2)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Stacked Column</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Full Stacked Column Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/100-percent-stacked-column-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Full Stacked Column chart thumbnail">
                        <path d="M30 91H44V112H30V91Z" fill="var(--rz-series-1)"/>
                        <path d="M48 89H62V112H48V89Z" fill="var(--rz-series-1)"/>
                        <path d="M84 89H98V112H84V89Z" fill="var(--rz-series-1)"/>
                        <path d="M120 89H134V112H120V89Z" fill="var(--rz-series-1)"/>
                        <path d="M66 101H80V112H66V101Z" fill="var(--rz-series-1)"/>
                        <path d="M102 101H116V112H102V101Z" fill="var(--rz-series-1)"/>
                        <path d="M138 73H152V112H138V73Z" fill="var(--rz-series-1)"/>
                        <path d="M156 64H170V112H156V64Z" fill="var(--rz-series-1)"/>
                        <rect x="30" y="75" width="14" height="16" fill="var(--rz-series-2)"/>
                        <rect x="48" y="68" width="14" height="21" fill="var(--rz-series-2)"/>
                        <rect x="84" y="64" width="14" height="25" fill="var(--rz-series-2)"/>
                        <rect x="120" y="52" width="14" height="37" fill="var(--rz-series-2)"/>
                        <rect x="66" y="91" width="14" height="10" fill="var(--rz-series-2)"/>
                        <rect x="102" y="81" width="14" height="20" fill="var(--rz-series-2)"/>
                        <rect x="138" y="55" width="14" height="18" fill="var(--rz-series-2)"/>
                        <rect x="156" y="35" width="14" height="29" fill="var(--rz-series-2)"/>
                        <rect x="156" y="20" width="14" height="15" fill="var(--rz-series-3)"/>
                        <rect x="138" y="20" width="14" height="35" fill="var(--rz-series-3)"/>
                        <rect x="120" y="20" width="14" height="32" fill="var(--rz-series-3)"/>
                        <rect x="102" y="20" width="14" height="61" fill="var(--rz-series-3)"/>
                        <rect x="84" y="20" width="14" height="44" fill="var(--rz-series-3)"/>
                        <rect x="66" y="20" width="14" height="71" fill="var(--rz-series-3)"/>
                        <rect x="48" y="20" width="14" height="48" fill="var(--rz-series-3)"/>
                        <rect x="30" y="20" width="14" height="55" fill="var(--rz-series-3)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Full Stacked Column <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Histogram *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/histogram-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Histogram chart thumbnail">
                        <path d="M156 91C156 89.8954 156.895 89 158 89H168C169.105 89 170 89.8954 170 91V104H156V91Z" fill="var(--rz-series-1)"/>
                        <path d="M138 79C138 77.8954 138.895 77 140 77H150C151.105 77 152 77.8954 152 79V104H138V79Z" fill="var(--rz-series-1)"/>
                        <path d="M120 60C120 58.8954 120.895 58 122 58H132C133.105 58 134 58.8954 134 60V104H120V60Z" fill="var(--rz-series-1)"/>
                        <path d="M102 46C102 44.8954 102.895 44 104 44H114C115.105 44 116 44.8954 116 46V104H102V46Z" fill="var(--rz-series-1)"/>
                        <path d="M84 55C84 53.8954 84.8954 53 86 53H96C97.1046 53 98 53.8954 98 55V104H84V55Z" fill="var(--rz-series-1)"/>
                        <path d="M66 64C66 62.8954 66.8954 62 68 62H78C79.1046 62 80 62.8954 80 64V104H66V64Z" fill="var(--rz-series-1)"/>
                        <path d="M48 79C48 77.8954 48.8954 77 50 77H60C61.1046 77 62 77.8954 62 79V104H48V79Z" fill="var(--rz-series-1)"/>
                        <path d="M30 88C30 86.8954 30.8954 86 32 86H42C43.1046 86 44 86.8954 44 88V104H30V88Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Histogram <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Grouped Column *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/grouped-column-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Grouped Column chart thumbnail">
                        <path d="M168 39C168 37.8954 168.895 37 170 37H180C181.105 37 182 37.8954 182 39V112H168V39Z" fill="var(--rz-series-2)"/>
                        <path d="M150 59C150 57.8954 150.895 57 152 57H162C163.105 57 164 57.8954 164 59V112H150V59Z" fill="var(--rz-series-1)"/>
                        <path d="M124 56C124 54.8954 124.895 54 126 54H136C137.105 54 138 54.8954 138 56V112H124V56Z" fill="var(--rz-series-2)"/>
                        <path d="M106 85C106 83.8954 106.895 83 108 83H118C119.105 83 120 83.8954 120 85V112H106V85Z" fill="var(--rz-series-1)"/>
                        <path d="M80 72C80 70.8954 80.8954 70 82 70H92C93.1046 70 94 70.8954 94 72V112H80V72Z" fill="var(--rz-series-2)"/>
                        <path d="M62 79C62 77.8954 62.8954 77 64 77H74C75.1046 77 76 77.8954 76 79V112H62V79Z" fill="var(--rz-series-1)"/>
                        <path d="M36 61C36 59.8954 36.8954 59 38 59H48C49.1046 59 50 59.8954 50 61V112H36V61Z" fill="var(--rz-series-2)"/>
                        <path d="M18 72C18 70.8954 18.8954 70 20 70H30C31.1046 70 32 70.8954 32 72V112H18V72Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Grouped Column <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Column Negative Points *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/negative-column-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Column Negative Points chart thumbnail">
                        <path d="M102 56C102 54.8954 102.895 54 104 54H114C115.105 54 116 54.8954 116 56V66H102V56Z" fill="var(--rz-series-1)"/>
                        <path d="M120 49C120 47.8954 120.895 47 122 47H132C133.105 47 134 47.8954 134 49V66H120V49Z" fill="var(--rz-series-1)"/>
                        <path d="M138 37C138 35.8954 138.895 35 140 35H150C151.105 35 152 35.8954 152 37V66H138V37Z" fill="var(--rz-series-1)"/>
                        <path d="M156 22C156 20.8954 156.895 20 158 20H168C169.105 20 170 20.8954 170 22V66H156V22Z" fill="var(--rz-series-1)"/>
                        <path d="M84 95C84 96.1046 84.8954 97 86 97H96C97.1046 97 98 96.1046 98 95V66H84V95Z" fill="var(--rz-series-1)"/>
                        <path d="M66 110C66 111.105 66.8954 112 68 112H78C79.1046 112 80 111.105 80 110V66H66V110Z" fill="var(--rz-series-1)"/>
                        <path d="M48 82C48 83.1046 48.8954 84 50 84H60C61.1046 84 62 83.1046 62 82V66H48V82Z" fill="var(--rz-series-1)"/>
                        <path d="M30 46C30 44.8954 30.8954 44 32 44H42C43.1046 44 44 44.8954 44 46V66H30V46Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Column Negative Points <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>
</RadzenRow>

@* --- Line Chart --- *@
<RadzenText Anchor="charts#line-chart" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-8 rz-pb-2">
    Line Chart
</RadzenText>
<RadzenRow Gap="2rem" RowGap="2rem" class="chart-gallery">
    @* Line Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/line-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Line chart thumbnail">
                        <path d="M20 93L36 87L52 71L68 80L84 65L100 76L116 55L132 64L148 47L164 52L180 39" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Line</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Spline Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/spline-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Spline chart thumbnail">
                        <path d="M20 93C28 93 28 87 36 87C44 87 44 71 52 71C60 71 60 80 68 80C76 80 76 65 84 65C92 65 92 76 100 76C108 76 108 55 116 55C124 55 124 64 132 64C140 64 140 47 148 47C156 47 156 52 164 52C172 52 172 39 180 39" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Spline <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Step Line Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/step-line-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Step Line chart thumbnail">
                        <path d="M20 93H36V87H52V71H68V80H84V65H100V76H116V55H132V64H148V47H164V44.5V39H180" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Step Line <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Stacked Line Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/stacked-line-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Stacked Line chart thumbnail">
                        <path d="M20 93L36 87L52 71L68 80L84 65L100 76L116 55L132 64L148 47L164 52L180 39" stroke="var(--rz-series-1)" stroke-width="2" stroke-linecap="round"/>
                        <path d="M20 97L36 99L52 90L68 96L84 84L100 99L116 79L132 93L148 74L164 85L180 76" stroke="var(--rz-series-2)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Stacked Line <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Full Stacked Line Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/100-percent-stacked-line-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Full Stacked Line chart thumbnail">
                        <path d="M20 93L36 87L52 71L68 80L84 65L100 76L116 55L132 64L148 47L164 52L180 39" stroke="var(--rz-series-1)" stroke-width="2" stroke-linecap="round"/>
                        <path d="M20 97L36 99L52 90L68 96L84 84L100 99L116 79L132 93L148 74L164 85L180 76" stroke="var(--rz-series-2)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M20 20H180" stroke="var(--rz-series-3)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Full Stacked Line <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>
</RadzenRow>

@* --- Waterfall Chart --- *@
<RadzenText Anchor="charts#waterfall-chart" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-8 rz-pb-2">
    Waterfall Chart
</RadzenText>
<RadzenRow Gap="2rem" RowGap="2rem" class="chart-gallery">
    @* Waterfall Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/waterfall-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Waterfall chart thumbnail">
                        <rect x="166" y="38" width="12" height="50" fill="var(--rz-success)"/>
                        <rect x="150" y="77" width="12" height="11" fill="var(--rz-danger)"/>
                        <rect x="134" y="77" width="12" height="31" fill="var(--rz-series-1)"/>
                        <rect x="118" y="48" width="12" height="29" fill="var(--rz-danger)"/>
                        <rect x="102" y="48" width="12" height="18" fill="var(--rz-success)"/>
                        <rect x="86" y="66" width="12" height="19" fill="var(--rz-success)"/>
                        <rect x="70" y="85" width="12" height="23" fill="var(--rz-series-1)"/>
                        <rect x="54" y="79" width="12" height="6" fill="var(--rz-danger)"/>
                        <rect x="38" y="79" width="12" height="11" fill="var(--rz-success)"/>
                        <rect x="22" y="90" width="12" height="18" fill="var(--rz-success)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Waterfall <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Horizontal Waterfall Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/horizontal-waterfall-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Horizontal Waterfall chart thumbnail">
                        <path d="M63 32V20L20 20L20 32L63 32Z" fill="var(--rz-success)"/>
                        <path d="M124 48V36L63 36L63 48L124 48Z" fill="var(--rz-success)"/>
                        <path d="M124 64V52L87 52L87 64L124 64Z" fill="var(--rz-danger)"/>
                        <path d="M87 80V68L20 68L20 80L87 80Z" fill="var(--rz-series-1)"/>
                        <path d="M148 96V84L87 84L87 96L148 96Z" fill="var(--rz-success)"/>
                        <path d="M148 112V100L20 100L20 112L148 112Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Horizontal Waterfall <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>
</RadzenRow>

@* --- Pie & Donut --- *@
<RadzenText Anchor="charts#part-to-whole-charts" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-8 rz-pb-2">
    Part-to-Whole Charts
</RadzenText>
<RadzenRow Gap="2rem" RowGap="2rem" class="chart-gallery">
    @* Pie Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/pie-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Pie chart thumbnail">
                        <path d="M145.987 67C145.455 91.9433 125.07 112 99.999 112C87.6559 112 76.4494 107.137 68.1875 99.2246L100.413 67H145.987Z" fill="var(--rz-series-2)"/>
                        <path d="M104 17.0107C128.611 17.5356 148.463 37.3891 148.988 62H104V17.0107Z" fill="var(--rz-series-1)"/>
                        <path d="M99 65.5859L66.7734 97.8115C58.8614 89.5497 54 78.3426 54 66C54 40.9291 74.0567 20.5427 99 20.0107V65.5859Z" fill="var(--rz-series-3)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Pie</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Donut Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/donut-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Donut chart thumbnail">
                        <path d="M145.987 67C145.455 91.9433 125.07 112 99.999 112C87.6559 112 76.4494 107.137 68.1875 99.2246L76.6758 90.7363C82.7638 96.4787 90.9696 100 99.999 100C118.442 100 133.454 85.3151 133.983 67H145.987Z" fill="var(--rz-series-2)"/>
                        <path d="M104 17.0107C128.611 17.5356 148.463 37.3891 148.988 62H136.984C136.465 44.017 121.983 29.5341 104 29.0146V17.0107Z" fill="var(--rz-series-1)"/>
                        <path d="M99 32.0146C80.6848 32.5437 66 47.5568 66 66C66 75.0289 69.52 83.2353 75.2617 89.3232L66.7734 97.8115C58.8614 89.5497 54 78.3426 54 66C54 40.9291 74.0567 20.5427 99 20.0107V32.0146Z" fill="var(--rz-series-3)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Donut</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Funnel Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/funnel-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Funnel chart thumbnail">
                        <path d="M157.172 40C157.702 40 158.211 39.7893 158.586 39.4142L166.586 31.4146C167.846 30.1547 166.953 28.0003 165.171 28.0003L34.8285 28.0004C33.0467 28.0004 32.1544 30.1547 33.4143 31.4146L41.4142 39.4142C41.7893 39.7893 42.298 40 42.8284 40L157.172 40Z" fill="var(--rz-series-1)"/>
                        <path d="M141.172 56C141.702 56 142.211 55.7893 142.586 55.4142L150.586 47.4146C151.846 46.1546 150.953 44.0003 149.171 44.0003L50.8285 44.0004C49.0467 44.0004 48.1544 46.1547 49.4143 47.4146L57.4142 55.4142C57.7893 55.7893 58.298 56 58.8284 56L141.172 56Z" fill="var(--rz-series-2)"/>
                        <path d="M128.93 72C129.598 72 130.223 71.6658 130.594 71.1094L135.927 63.1098C136.813 61.7807 135.86 60.0003 134.263 60.0003L65.7371 60.0003C64.1397 60.0003 63.1869 61.7806 64.073 63.1098L69.4063 71.1094C69.7772 71.6658 70.4017 72 71.0704 72L128.93 72Z" fill="var(--rz-series-3)"/>
                        <path d="M120.559 87.9995C121.419 87.9995 122.184 87.4486 122.456 86.6319L125.122 78.6323C125.554 77.3372 124.59 75.9998 123.225 75.9998L76.7748 76.0003C75.4097 76.0003 74.4458 77.3377 74.8775 78.6328L77.5441 86.6325C77.8164 87.4491 78.5807 88 79.4415 88L120.559 87.9995Z" fill="var(--rz-series-4)"/>
                        <path d="M120 103.999C121.105 103.999 122 103.104 122 101.999V93.9998C122 92.8952 121.105 91.9998 120 91.9998L80 92.0003C78.8954 92.0003 78 92.8958 78 94.0003V102C78 103.105 78.8954 104 80 104L120 103.999Z" fill="var(--rz-series-5)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Funnel <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Pyramid Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/pyramid-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Pyramid chart thumbnail">
                        <path d="M164.172 92C164.702 92 165.211 92.2107 165.586 92.5858L173.586 100.585C174.846 101.845 173.953 104 172.171 104L27.8285 104C26.0467 104 25.1544 101.845 26.4143 100.585L34.4142 92.5858C34.7893 92.2107 35.298 92 35.8284 92L164.172 92Z" fill="var(--rz-series-1)"/>
                        <path d="M148.172 76C148.702 76 149.211 76.2107 149.586 76.5858L157.586 84.5854C158.846 85.8454 157.953 87.9997 156.171 87.9997L43.8285 87.9996C42.0467 87.9996 41.1544 85.8453 42.4143 84.5854L50.4142 76.5858C50.7893 76.2107 51.298 76 51.8284 76L148.172 76Z" fill="var(--rz-series-2)"/>
                        <path d="M132.172 60C132.702 60 133.211 60.2107 133.586 60.5858L141.586 68.5854C142.846 69.8454 141.953 71.9997 140.171 71.9997L59.8285 71.9996C58.0467 71.9996 57.1544 69.8453 58.4143 68.5854L66.4142 60.5858C66.7893 60.2107 67.298 60 67.8284 60L132.172 60Z" fill="var(--rz-series-3)"/>
                        <path d="M116.172 44C116.702 44 117.211 44.2107 117.586 44.5858L125.586 52.5855C126.846 53.8454 125.953 55.9997 124.171 55.9997L75.8285 55.9996C74.0467 55.9996 73.1544 53.8453 74.4143 52.5854L82.4142 44.5858C82.7893 44.2107 83.298 44 83.8284 44L116.172 44Z" fill="var(--rz-series-4)"/>
                        <path d="M100.172 28C100.702 28 101.211 28.2107 101.586 28.5858L109.586 36.5855C110.846 37.8454 109.953 39.9997 108.171 39.9997L91.8285 39.9997C90.0467 39.9997 89.1544 37.8453 90.4143 36.5854L98.4142 28.5858C98.7893 28.2107 99.298 28 99.8284 28L100.172 28Z" fill="var(--rz-series-5)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Pyramid <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>
</RadzenRow>

@* --- Scatter & Bubble --- *@
<RadzenText Anchor="charts#scatter-bubble" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-8 rz-pb-2">
    Scatter &amp; Bubble
</RadzenText>
<RadzenRow Gap="2rem" RowGap="2rem" class="chart-gallery">
    @* Scatter Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/scatter-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Scatter chart thumbnail">
                        <circle cx="36" cy="87" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="52" cy="71" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="68" cy="80" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="84" cy="66" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="100" cy="76" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="116" cy="55" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="132" cy="64" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="148" cy="47" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="164" cy="52" r="5" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Scatter</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Scatter Line Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/scatter-line-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Scatter Line chart thumbnail">
                        <circle cx="36" cy="87" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="52" cy="71" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="68" cy="80" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="84" cy="66" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="100" cy="76" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="116" cy="55" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="132" cy="64" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="148" cy="47" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="164" cy="52" r="5" fill="var(--rz-series-1)"/>
                        <path d="M36 87L52 71L68 80L84 65L100 76L116 55L132 64L148 47L164 52" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Scatter Line <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Bubble Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/bubble-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Bubble chart thumbnail">
                        <circle cx="32" cy="90" r="12" fill="var(--rz-series-1)" opacity="0.6"/>
                        <circle cx="65" cy="52" r="26" fill="var(--rz-series-2)" opacity="0.6"/>
                        <circle cx="95.5" cy="93.5" r="14.5" fill="var(--rz-series-3)" opacity="0.6"/>
                        <circle cx="117" cy="63" r="14" fill="var(--rz-series-4)" opacity="0.6"/>
                        <circle cx="147" cy="79" r="8" fill="var(--rz-series-5)" opacity="0.6"/>
                        <circle cx="165" cy="51" r="15" fill="var(--rz-series-6)" opacity="0.6"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Bubble</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>
</RadzenRow>

@* --- Financial --- *@
<RadzenText Anchor="charts#financial" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-8 rz-pb-2">
    Financial
</RadzenText>
<RadzenRow Gap="2rem" RowGap="2rem" class="chart-gallery">
    @* Candlestick Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/candlestick-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Candlestick chart thumbnail">
                        <rect x="21" y="84" width="12" height="18" fill="var(--rz-danger)"/>
                        <line x1="27" y1="76" x2="27" y2="106" stroke="var(--rz-danger)" stroke-width="2"/>
                        <rect x="63" y="73" width="12" height="22" fill="var(--rz-danger)"/>
                        <line x1="69" y1="67" x2="69" y2="97" stroke="var(--rz-danger)" stroke-width="2"/>
                        <rect x="126" y="50" width="12" height="38" fill="var(--rz-danger)"/>
                        <line x1="132" y1="36" x2="132" y2="96" stroke="var(--rz-danger)" stroke-width="2"/>
                        <rect x="42" y="73" width="12" height="29" fill="var(--rz-success)"/>
                        <line x1="48" y1="47" x2="48" y2="107" stroke="var(--rz-success)" stroke-width="2"/>
                        <rect x="84" y="69" width="12" height="26" fill="var(--rz-success)"/>
                        <line x1="90" y1="52" x2="90" y2="102" stroke="var(--rz-success)" stroke-width="2"/>
                        <rect x="105" y="50" width="12" height="19" fill="var(--rz-success)"/>
                        <line x1="111" y1="43" x2="111" y2="73" stroke="var(--rz-success)" stroke-width="2"/>
                        <rect x="147" y="67" width="12" height="21" fill="var(--rz-success)"/>
                        <line x1="153" y1="64" x2="153" y2="94" stroke="var(--rz-success)" stroke-width="2"/>
                        <rect x="168" y="34" width="12" height="33" fill="var(--rz-success)"/>
                        <line x1="174" y1="25" x2="174" y2="75" stroke="var(--rz-success)" stroke-width="2"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Candlestick <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* OHLC Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/ohlc-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="OHLC chart thumbnail">
                        <path d="M29 106H34V108H29V112H27V92H22V90H27V76H29V106Z" fill="var(--rz-danger)"/>
                        <path d="M61 99H66V101H61V103H59V81H54V79H59V73H61V99Z" fill="var(--rz-danger)"/>
                        <path d="M109 92H114V94H109V102H107V58H102V56H107V42H109V92Z" fill="var(--rz-danger)"/>
                        <path d="M157 65H162V67H157V84H155V42H150V40H155V24H157V65Z" fill="var(--rz-danger)"/>
                        <path d="M77 75H82V77H77V108H75V101H70V99H75V58H77V75Z" fill="var(--rz-success)"/>
                        <path d="M93 56H98V58H93V79H91V75H86V73H91V49H93V56Z" fill="var(--rz-success)"/>
                        <path d="M125 73H130V75H125V100H123V94H118V92H123V70H125V73Z" fill="var(--rz-success)"/>
                        <path d="M141 40H146V42H141V81H139V73H134V71H139V31H141V40Z" fill="var(--rz-success)"/>
                        <path d="M173 24H178V26H173V80H171V67H166V65H171V20H173V24Z" fill="var(--rz-success)"/>
                        <path d="M45 79H50V81H45V113H43V108H38V106H43V53H45V79Z" fill="var(--rz-success)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">OHLC <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* High-Low Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/highlow-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="High-Low chart thumbnail">
                        <rect x="170" y="29" width="4" height="75" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="154" y="41" width="4" height="55" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="138" y="32" width="4" height="58" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="122" y="44" width="4" height="29" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="106" y="40" width="4" height="46" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="90" y="61" width="4" height="19" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="74" y="51" width="4" height="42" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="58" y="51" width="4" height="35" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="42" y="44" width="4" height="53" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="26" y="47" width="4" height="42" rx="2" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">High-Low <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Box Plot Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/box-plot-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Box Plot chart thumbnail">
                        <path d="M33 81C33 82.1046 32.1046 83 31 83H28V87H32C32.5523 87 33 87.4477 33 88C33 88.5523 32.5523 89 32 89H22C21.4477 89 21 88.5523 21 88C21 87.4477 21.4477 87 22 87H26V83H23C21.8954 83 21 82.1046 21 81V70H33V81Z" fill="var(--rz-series-1)"/>
                        <path d="M32 47C32.5523 47 33 47.4477 33 48C33 48.5523 32.5523 49 32 49H28V53H31C32.1046 53 33 53.8954 33 55V68H21V55C21 53.8954 21.8954 53 23 53H26V49H22C21.4477 49 21 48.5523 21 48C21 47.4477 21.4477 47 22 47H32Z" fill="var(--rz-series-1)"/>
                        <path d="M75 83C75 84.1046 74.1046 85 73 85H70V89H74C74.5523 89 75 89.4477 75 90C75 90.5523 74.5523 91 74 91H64C63.4477 91 63 90.5523 63 90C63 89.4477 63.4477 89 64 89H68V85H65C63.8954 85 63 84.1046 63 83V72H75V83Z" fill="var(--rz-series-1)"/>
                        <path d="M74 49C74.5523 49 75 49.4477 75 50C75 50.5523 74.5523 51 74 51H70V55H73C74.1046 55 75 55.8954 75 57V70H63V57C63 55.8954 63.8954 55 65 55H68V51H64C63.4477 51 63 50.5523 63 50C63 49.4477 63.4477 49 64 49H74Z" fill="var(--rz-series-1)"/>
                        <path d="M117 82C117 83.1046 116.105 84 115 84H112V88H116C116.552 88 117 88.4477 117 89C117 89.5523 116.552 90 116 90H106C105.448 90 105 89.5523 105 89C105 88.4477 105.448 88 106 88H110V84H107C105.895 84 105 83.1046 105 82V71H117V82Z" fill="var(--rz-series-1)"/>
                        <path d="M116 48C116.552 48 117 48.4477 117 49C117 49.5523 116.552 50 116 50H112V54H115C116.105 54 117 54.8954 117 56V69H105V56C105 54.8954 105.895 54 107 54H110V50H106C105.448 50 105 49.5523 105 49C105 48.4477 105.448 48 106 48H116Z" fill="var(--rz-series-1)"/>
                        <path d="M54 86C54 87.1046 53.1046 88 52 88H49V95H53C53.5523 95 54 95.4477 54 96C54 96.5523 53.5523 97 53 97H43C42.4477 97 42 96.5523 42 96C42 95.4477 42.4477 95 43 95H47V88H44C42.8954 88 42 87.1046 42 86V73H54V86Z" fill="var(--rz-series-1)"/>
                        <path d="M53 44C53.5523 44 54 44.4477 54 45C54 45.5523 53.5523 46 53 46H49V53H52C53.1046 53 54 53.8954 54 55V71H42V55C42 53.8954 42.8954 53 44 53H47V46H43C42.4477 46 42 45.5523 42 45C42 44.4477 42.4477 44 43 44H53Z" fill="var(--rz-series-1)"/>
                        <path d="M96 83C96 84.1046 95.1046 85 94 85H91V91H95C95.5523 91 96 91.4477 96 92C96 92.5523 95.5523 93 95 93H85C84.4477 93 84 92.5523 84 92C84 91.4477 84.4477 91 85 91H89V85H86C84.8954 85 84 84.1046 84 83V76H96V83Z" fill="var(--rz-series-1)"/>
                        <path d="M95 51C95.5523 51 96 51.4477 96 52C96 52.5523 95.5523 53 95 53H91V63H94C95.1046 63 96 63.8954 96 65V74H84V65C84 63.8954 84.8954 63 86 63H89V53H85C84.4477 53 84 52.5523 84 52C84 51.4477 84.4477 51 85 51H95Z" fill="var(--rz-series-1)"/>
                        <path d="M138 77C138 78.1046 137.105 79 136 79H133V84H137C137.552 84 138 84.4477 138 85C138 85.5523 137.552 86 137 86H127C126.448 86 126 85.5523 126 85C126 84.4477 126.448 84 127 84H131V79H128C126.895 79 126 78.1046 126 77V68H138V77Z" fill="var(--rz-series-1)"/>
                        <path d="M137 40C137.552 40 138 40.4477 138 41C138 41.5523 137.552 42 137 42H133V53H136C137.105 53 138 53.8954 138 55V66H126V55C126 53.8954 126.895 53 128 53H131V42H127C126.448 42 126 41.5523 126 41C126 40.4477 126.448 40 127 40H137Z" fill="var(--rz-series-1)"/>
                        <path d="M159 73C159 74.1046 158.105 75 157 75H154V88H158C158.552 88 159 88.4477 159 89C159 89.5523 158.552 90 158 90H148C147.448 90 147 89.5523 147 89C147 88.4477 147.448 88 148 88H152V75H149C147.895 75 147 74.1046 147 73V64H159V73Z" fill="var(--rz-series-1)"/>
                        <path d="M158 32C158.552 32 159 32.4477 159 33C159 33.5523 158.552 34 158 34H154V47H157C158.105 47 159 47.8954 159 49V62H147V49C147 47.8954 147.895 47 149 47H152V34H148C147.448 34 147 33.5523 147 33C147 32.4477 147.448 32 148 32H158Z" fill="var(--rz-series-1)"/>
                        <path d="M180 88C180 89.1046 179.105 90 178 90H175V102H179C179.552 102 180 102.448 180 103C180 103.552 179.552 104 179 104H169C168.448 104 168 103.552 168 103C168 102.448 168.448 102 169 102H173V90H170C168.895 90 168 89.1046 168 88V72H180V88Z" fill="var(--rz-series-1)"/>
                        <path d="M179 29C179.552 29 180 29.4477 180 30C180 30.5523 179.552 31 179 31H175V59H178C179.105 59 180 59.8954 180 61V70H168V61C168 59.8954 168.895 59 170 59H173V31H169C168.448 31 168 30.5523 168 30C168 29.4477 168.448 29 169 29H179Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Box Plot <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>
</RadzenRow>

@* --- Statistical & Interactive --- *@
<RadzenText Anchor="charts#statistical-interactive" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-8 rz-pb-2">
    Statistical &amp; Interactive
</RadzenText>
<RadzenRow Gap="2rem" RowGap="2rem" class="chart-gallery">
    @* Trendline Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/chart-trends">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Trendline chart thumbnail">
                        <circle cx="36" cy="87" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="52" cy="71" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="68" cy="80" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="84" cy="66" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="100" cy="76" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="116" cy="55" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="132" cy="64" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="148" cy="47" r="5" fill="var(--rz-series-1)"/>
                        <circle cx="164" cy="52" r="5" fill="var(--rz-series-1)"/>
                        <path d="M20 94L180 41" stroke="var(--rz-series-2)" stroke-width="3" stroke-dasharray="8 4"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Trendline <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Pareto Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/pareto-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Pareto chart thumbnail">
                        <path d="M166 102C166 100.895 166.895 100 168 100H176C177.105 100 178 100.895 178 102V112H166V102Z" fill="var(--rz-series-1)"/>
                        <path d="M134 91C134 89.8954 134.895 89 136 89H144C145.105 89 146 89.8954 146 91V112H134V91Z" fill="var(--rz-series-1)"/>
                        <path d="M102 79C102 77.8954 102.895 77 104 77H112C113.105 77 114 77.8954 114 79V112H102V79Z" fill="var(--rz-series-1)"/>
                        <path d="M54 64C54 62.8954 54.8954 62 56 62H64C65.1046 62 66 62.8954 66 64V112H54V64Z" fill="var(--rz-series-1)"/>
                        <path d="M22 54C22 52.8954 22.8954 52 24 52H32C33.1046 52 34 52.8954 34 54V112H22V54Z" fill="var(--rz-series-1)"/>
                        <path d="M38 59C38 57.8954 38.8954 57 40 57H48C49.1046 57 50 57.8954 50 59V112H38V59Z" fill="var(--rz-series-1)"/>
                        <path d="M70 72C70 70.8954 70.8954 70 72 70H80C81.1046 70 82 70.8954 82 72V112H70V72Z" fill="var(--rz-series-1)"/>
                        <path d="M86 79C86 77.8954 86.8954 77 88 77H96C97.1046 77 98 77.8954 98 79V112H86V79Z" fill="var(--rz-series-1)"/>
                        <path d="M118 88C118 86.8954 118.895 86 120 86H128C129.105 86 130 86.8954 130 88V112H118V88Z" fill="var(--rz-series-1)"/>
                        <path d="M150 100C150 98.8954 150.895 98 152 98H160C161.105 98 162 98.8954 162 100V112H150V100Z" fill="var(--rz-series-1)"/>
                        <path d="M28 91L44 81L60 71L76 62L92 54L108 48L124 43L140 38L156 34L172 32" stroke="var(--rz-series-2)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Pareto <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* DrillDown Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/drilldown-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="DrillDown chart thumbnail">
                        <path d="M166 39C166 37.8954 166.895 37 168 37H176C177.105 37 178 37.8954 178 39V112H166V39Z" fill="var(--rz-series-1)"/>
                        <path d="M150 59C150 57.8954 150.895 57 152 57H160C161.105 57 162 57.8954 162 59V112H150V59Z" fill="var(--rz-series-1)"/>
                        <path d="M134 56C134 54.8954 134.895 54 136 54H144C145.105 54 146 54.8954 146 56V112H134V56Z" fill="var(--rz-series-1)"/>
                        <path d="M118 85C118 83.8954 118.895 83 120 83H128C129.105 83 130 83.8954 130 85V112H118V85Z" fill="var(--rz-series-1)"/>
                        <path d="M102 68C102 66.8954 102.895 66 104 66H112C113.105 66 114 66.8954 114 68V112H102V68Z" fill="var(--rz-series-2)"/>
                        <path d="M86 95C86 93.8954 86.8954 93 88 93H96C97.1046 93 98 93.8954 98 95V112H86V95Z" fill="var(--rz-series-1)"/>
                        <path d="M70 72C70 70.8954 70.8954 70 72 70H80C81.1046 70 82 70.8954 82 72V112H70V72Z" fill="var(--rz-series-1)"/>
                        <path d="M54 79C54 77.8954 54.8954 77 56 77H64C65.1046 77 66 77.8954 66 79V112H54V79Z" fill="var(--rz-series-1)"/>
                        <path d="M38 61C38 59.8954 38.8954 59 40 59H48C49.1046 59 50 59.8954 50 61V112H38V61Z" fill="var(--rz-series-1)"/>
                        <path d="M22 72C22 70.8954 22.8954 70 24 70H32C33.1046 70 34 70.8954 34 72V112H22V72Z" fill="var(--rz-series-1)"/>
                        <path d="M107.5 58.5L98.8398 43.5L106 43.5L106 35L109 35L109 43.5L116.16 43.5L107.5 58.5Z" fill="var(--rz-series-2)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">DrillDown <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Bullet Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/bullet-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Bullet chart thumbnail">
                        <rect opacity="0.2" width="12" height="68" transform="matrix(-4.37114e-08 -1 -1 4.37114e-08 88 112)" fill="var(--rz-series-1)"/>
                        <rect opacity="0.2" width="12" height="105" transform="matrix(-4.37114e-08 -1 -1 4.37114e-08 125 80)" fill="var(--rz-series-1)"/>
                        <rect opacity="0.2" width="12" height="127" transform="matrix(-4.37114e-08 -1 -1 4.37114e-08 147 48)" fill="var(--rz-series-1)"/>
                        <rect opacity="0.2" width="12" height="88" transform="matrix(-4.37114e-08 -1 -1 4.37114e-08 108 96)" fill="var(--rz-series-1)"/>
                        <rect opacity="0.2" width="12" height="71" transform="matrix(-4.37114e-08 -1 -1 4.37114e-08 91 64)" fill="var(--rz-series-1)"/>
                        <rect opacity="0.2" width="12" height="88" transform="matrix(-4.37114e-08 -1 -1 4.37114e-08 108 32)" fill="var(--rz-series-1)"/>
                        <path d="M48 108L48 104L20 104L20 108L48 108Z" fill="var(--rz-series-1)"/>
                        <path d="M85 76L85 72L20 72L20 76L85 76Z" fill="var(--rz-series-1)"/>
                        <path d="M107 44L107 40L20 40L20 44L107 44Z" fill="var(--rz-series-1)"/>
                        <path d="M56 92L56 88L20 88L20 92L56 92Z" fill="var(--rz-series-1)"/>
                        <path d="M39 60L39 56L20 56L20 60L39 60Z" fill="var(--rz-series-1)"/>
                        <path d="M68 28L68 24L20 24L20 28L68 28Z" fill="var(--rz-series-1)"/>
                        <path d="M63 112L63 100L61 100L61 112L63 112Z" fill="var(--rz-danger)"/>
                        <path d="M72 80L72 68L70 68L70 80L72 80Z" fill="var(--rz-danger)"/>
                        <path d="M90 48L90 36L88 36L88 48L90 48Z" fill="var(--rz-danger)"/>
                        <path d="M52 96L52 84L50 84L50 96L52 96Z" fill="var(--rz-danger)"/>
                        <path d="M47 64L47 52L45 52L45 64L47 64Z" fill="var(--rz-danger)"/>
                        <path d="M86 32L86 20L84 20L84 32L86 32Z" fill="var(--rz-danger)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Bullet <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Live Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/live-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Live Chart chart thumbnail">
                        <path d="M20 73L36 87L52 63L68 96L84 57L100 80L116 39L132 72L148 47L164 84" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M180 39L164 84" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round" stroke-dasharray="4 8"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Live Chart <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>
</RadzenRow>

@* --- Specialized Charts --- *@
<RadzenText Anchor="charts#specialized-charts" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-8 rz-pb-2">
    Specialized Charts
</RadzenText>
<RadzenRow Gap="2rem" RowGap="2rem" class="chart-gallery">

    @* Heatmap *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/heatmap-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Heatmap chart thumbnail">
                        <rect opacity="0.6" x="118" y="26" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect opacity="0.45" x="118" y="82" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect opacity="0.15" x="150" y="26" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="150" y="82" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect opacity="0.9" x="86" y="26" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect opacity="0.15" x="86" y="82" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect opacity="0.5" x="54" y="26" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect opacity="0.6" x="54" y="82" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect opacity="0.2" x="22" y="26" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect opacity="0.3" x="22" y="82" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect opacity="0.3" x="150" y="54" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="118" y="54" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect opacity="0.6" x="86" y="54" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect opacity="0.4" x="54" y="54" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect opacity="0.6" x="22" y="54" width="28" height="24" rx="2" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Heatmap <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Heatmap Series (numeric X/Y) *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/heatmap-series-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Heatmap series chart thumbnail">
                        <rect x="22" y="22" width="32" height="22" rx="2" fill="var(--rz-series-1)" opacity="0.15"/>
                        <rect x="56" y="22" width="32" height="22" rx="2" fill="var(--rz-series-1)" opacity="0.3"/>
                        <rect x="90" y="22" width="32" height="22" rx="2" fill="var(--rz-series-2)" opacity="0.45"/>
                        <rect x="124" y="22" width="32" height="22" rx="2" fill="var(--rz-series-2)" opacity="0.55"/>
                        <rect x="158" y="22" width="20" height="22" rx="2" fill="var(--rz-series-3)" opacity="0.65"/>
                        <rect x="22" y="46" width="32" height="22" rx="2" fill="var(--rz-series-1)" opacity="0.3"/>
                        <rect x="56" y="46" width="32" height="22" rx="2" fill="var(--rz-series-2)" opacity="0.55"/>
                        <rect x="90" y="46" width="32" height="22" rx="2" fill="var(--rz-series-3)" opacity="0.75"/>
                        <rect x="124" y="46" width="32" height="22" rx="2" fill="var(--rz-series-3)" opacity="0.85"/>
                        <rect x="158" y="46" width="20" height="22" rx="2" fill="var(--rz-series-4)" opacity="0.65"/>
                        <rect x="22" y="70" width="32" height="22" rx="2" fill="var(--rz-series-1)" opacity="0.45"/>
                        <rect x="56" y="70" width="32" height="22" rx="2" fill="var(--rz-series-2)" opacity="0.7"/>
                        <rect x="90" y="70" width="32" height="22" rx="2" fill="var(--rz-series-4)" opacity="0.95"/>
                        <rect x="124" y="70" width="32" height="22" rx="2" fill="var(--rz-series-3)" opacity="0.75"/>
                        <rect x="158" y="70" width="20" height="22" rx="2" fill="var(--rz-series-2)" opacity="0.5"/>
                        <rect x="22" y="94" width="32" height="14" rx="2" fill="var(--rz-series-1)" opacity="0.2"/>
                        <rect x="56" y="94" width="32" height="14" rx="2" fill="var(--rz-series-1)" opacity="0.35"/>
                        <rect x="90" y="94" width="32" height="14" rx="2" fill="var(--rz-series-2)" opacity="0.5"/>
                        <rect x="124" y="94" width="32" height="14" rx="2" fill="var(--rz-series-2)" opacity="0.4"/>
                        <rect x="158" y="94" width="20" height="14" rx="2" fill="var(--rz-series-1)" opacity="0.25"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Heatmap Series <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Contour (Isoilluminance) *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/contour-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Contour chart thumbnail">
                        <rect x="22" y="18" width="156" height="96" rx="2" fill="var(--rz-series-1)" opacity="0.25"/>
                        <ellipse cx="100" cy="66" rx="68" ry="40" fill="var(--rz-series-2)" opacity="0.45"/>
                        <ellipse cx="100" cy="66" rx="52" ry="30" fill="var(--rz-series-3)" opacity="0.6"/>
                        <ellipse cx="100" cy="66" rx="36" ry="20" fill="var(--rz-series-4)" opacity="0.75"/>
                        <ellipse cx="100" cy="66" rx="20" ry="11" fill="var(--rz-series-5)" opacity="0.9"/>
                        <ellipse cx="100" cy="66" rx="68" ry="40" fill="none" stroke="rgba(0,0,0,0.35)" stroke-width="0.75"/>
                        <ellipse cx="100" cy="66" rx="52" ry="30" fill="none" stroke="rgba(0,0,0,0.35)" stroke-width="0.75"/>
                        <ellipse cx="100" cy="66" rx="36" ry="20" fill="none" stroke="rgba(0,0,0,0.35)" stroke-width="0.75"/>
                        <ellipse cx="100" cy="66" rx="20" ry="11" fill="none" stroke="rgba(0,0,0,0.35)" stroke-width="0.75"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Contour <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Treemap *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/treemap-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Treemap chart thumbnail">
                        <rect x="24" y="26" width="88" height="52" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="116" y="26" width="60" height="32" rx="2" fill="var(--rz-series-2)"/>
                        <rect x="116" y="62" width="60" height="16" rx="2" fill="var(--rz-series-3)"/>
                        <rect x="24" y="82" width="48" height="24" rx="2" fill="var(--rz-series-4)"/>
                        <rect x="76" y="82" width="48" height="24" rx="2" fill="var(--rz-series-5)"/>
                        <rect x="128" y="82" width="48" height="24" rx="2" fill="var(--rz-series-6)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Treemap <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Sparkline *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/sparkline">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Sparkline chart thumbnail">
                        <circle cx="24.5" cy="104.5" r="2.5" fill="var(--rz-series-1)"/>
                        <circle cx="32.5" cy="96.5" r="2.5" fill="var(--rz-series-1)"/>
                        <circle cx="40.5" cy="101" r="2.5" fill="var(--rz-series-1)"/>
                        <circle cx="48.5" cy="94" r="2.5" fill="var(--rz-series-1)"/>
                        <circle cx="56.5" cy="99" r="2.5" fill="var(--rz-series-1)"/>
                        <circle cx="64.5" cy="88.5" r="2.5" fill="var(--rz-series-1)"/>
                        <circle cx="72.5" cy="93" r="2.5" fill="var(--rz-series-1)"/>
                        <circle cx="80.5" cy="84.5" r="2.5" fill="var(--rz-series-1)"/>
                        <circle cx="88.5" cy="87" r="2.5" fill="var(--rz-series-1)"/>
                        <path d="M24.5 104.5L32.5 96.5L40.5 101L48.5 93.5L56.5 99L64.5 88.5L72.5 93L80.5 84.5L88.5 87" stroke="var(--rz-series-1)" stroke-width="1.5" stroke-linecap="round"/>
                        <path d="M172 82C172 81.4477 172.448 81 173 81H177C177.552 81 178 81.4477 178 82V110H172V82Z" fill="var(--rz-series-2)"/>
                        <path d="M164 96.5C164 95.9477 164.448 95.5 165 95.5H169C169.552 95.5 170 95.9477 170 96.5V110H164V96.5Z" fill="var(--rz-series-1)"/>
                        <path d="M156 88C156 87.4477 156.448 87 157 87H161C161.552 87 162 87.4477 162 88V110H156V88Z" fill="var(--rz-series-2)"/>
                        <path d="M148 101.5C148 100.948 148.448 100.5 149 100.5H153C153.552 100.5 154 100.948 154 101.5V110H148V101.5Z" fill="var(--rz-series-1)"/>
                        <path d="M140 90C140 89.4477 140.448 89 141 89H145C145.552 89 146 89.4477 146 90V110H140V90Z" fill="var(--rz-series-2)"/>
                        <path d="M132 93.5C132 92.9477 132.448 92.5 133 92.5H137C137.552 92.5 138 92.9477 138 93.5V110H132V93.5Z" fill="var(--rz-series-1)"/>
                        <path d="M124 84.5C124 83.9477 124.448 83.5 125 83.5H129C129.552 83.5 130 83.9477 130 84.5V110H124V84.5Z" fill="var(--rz-series-2)"/>
                        <path d="M116 90C116 89.4477 116.448 89 117 89H121C121.552 89 122 89.4477 122 90V110H116V90Z" fill="var(--rz-series-1)"/>
                        <path d="M168.992 45.4951C168.726 57.9668 158.533 67.9951 145.998 67.9951C139.826 67.9951 134.223 65.5638 130.092 61.6074L134.336 57.3633C137.38 60.2344 141.483 61.9951 145.998 61.9951C155.219 61.9951 162.725 54.6527 162.99 45.4951H168.992Z" fill="var(--rz-series-2)"/>
                        <path d="M146.498 22C158.803 22.2624 168.73 32.1892 168.992 44.4946H162.99C162.731 35.5031 155.49 28.2617 146.498 28.002V22Z" fill="var(--rz-series-1)"/>
                        <path d="M145.5 28.002C136.342 28.2665 129 35.7735 129 44.9951C129 49.5094 130.76 53.6123 133.631 56.6562L129.387 60.9004C125.431 56.7695 123 51.1663 123 44.9951C123 32.4597 133.028 22.266 145.5 22V28.002Z" fill="var(--rz-series-3)"/>
                        <path d="M79.9937 45.4951C79.7277 57.9668 69.535 67.9951 56.9995 67.9951C50.8279 67.9951 45.2247 65.5638 41.0938 61.6074L57.2065 45.4951H79.9937Z" fill="var(--rz-series-2)"/>
                        <path d="M57.5 22C69.8054 22.2624 79.7317 32.1892 79.9941 44.4946H57.5V22Z" fill="var(--rz-series-1)"/>
                        <path d="M56.5 44.7876L40.3867 60.9004C36.4307 56.7695 34 51.1659 34 44.9946C34 32.4592 44.0283 22.266 56.5 22V44.7876Z" fill="var(--rz-series-3)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Sparkline</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Spider Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/spider-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Spider chart thumbnail">
                        <path d="M150 66L50 66" stroke="var(--rz-chart-axis-color)" stroke-width="2" stroke-linecap="round"/>
                        <path d="M124.996 109.299L74.9961 22.6963" stroke="var(--rz-chart-axis-color)" stroke-width="2" stroke-linecap="round"/>
                        <path d="M74.9961 109.294L124.996 22.6914" stroke="var(--rz-chart-axis-color)" stroke-width="2" stroke-linecap="round"/>
                        <path opacity="0.4" d="M74.9997 109.5L125 109.5L149.999 66.0004L125 22.5L75 22.5L49.4997 66.0004L74.9997 109.5Z" fill="var(--rz-series-1)"/>
                        <path opacity="0.4" d="M81.5018 98L113.5 89L138 66L116 38.4999L81.5 34L69.0004 66L81.5018 98Z" fill="var(--rz-series-2)"/>
                        <path opacity="0.4" d="M121 66L109 50.5L87.5 44.5L81.5 66L89 85L109.5 82.5L121 66Z" fill="var(--rz-series-3)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Spider <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Sankey Diagram *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/sankey-diagram">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Sankey Diagram chart thumbnail">
                        <path d="M166 44H176C177.105 44 178 44.8954 178 46V87C178 88.1046 177.105 89 176 89H166V44Z" fill="var(--rz-series-4)"/>
                        <path d="M166 20H176C177.105 20 178 20.8954 178 22V38C178 39.1046 177.105 40 176 40H166V20Z" fill="var(--rz-series-3)"/>
                        <path d="M166 93H176C177.105 93 178 93.8954 178 95V110C178 111.105 177.105 112 176 112H166V93Z" fill="var(--rz-series-5)"/>
                        <path d="M22 60C22 58.8954 22.8954 58 24 58H34V112H24C22.8954 112 22 111.105 22 110V60Z" fill="var(--rz-series-2)"/>
                        <path d="M22 22C22 20.8954 22.8954 20 24 20H34V54H24C22.8954 54 22 53.1046 22 52V22Z" fill="var(--rz-series-1)"/>
                        <path opacity="0.3" d="M34 58C100 58 100 20 166 20V40C100 40 100 79 34 79V58Z" fill="var(--rz-series-2)"/>
                        <path opacity="0.3" d="M34 79C100 79 99.9998 57 166 57V89.0005C99.9997 89.0005 100 112 34 112V79Z" fill="var(--rz-series-2)"/>
                        <path opacity="0.3" d="M34 34C100 34 100 93 166 93V112C100 112 100 53.9998 34 53.9998V34Z" fill="var(--rz-series-1)"/>
                        <path opacity="0.3" d="M34.0006 20C100.001 20 100.001 44 166.001 44V57C100.001 57 100 34 34 34L34.0006 20Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Sankey Diagram</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Timeline *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/timeline">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Timeline chart thumbnail">
                        <path d="M172 66L28 66" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M57 91L57 66" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M100 66L100 41" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M145 91L145 66" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <circle cx="56.5" cy="91.5" r="10.5" fill="var(--rz-series-1)"/>
                        <circle cx="100.5" cy="41.5" r="10.5" fill="var(--rz-series-2)"/>
                        <circle cx="144.5" cy="91.5" r="10.5" fill="var(--rz-series-3)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Timeline</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* QRCode *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/qrcode">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="QRCode chart thumbnail">
                        <rect x="56" y="22" width="24" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="56" y="54" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="88" y="22" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="88" y="38" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="88" y="54" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="104" y="54" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="120" y="54" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="136" y="54" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="88" y="70" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="104" y="86" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="136" y="86" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="120" y="70" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="120" y="86" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="104" y="102" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="136" y="102" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="104" y="22" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="72" y="70" width="8" height="8" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="56" y="86" width="24" height="24" rx="2" fill="var(--rz-series-1)"/>
                        <rect x="120" y="22" width="24" height="24" rx="2" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">QRCode <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Barcode *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/barcode">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Barcode chart thumbnail">
                        <rect x="24" y="22" width="4" height="88" fill="var(--rz-series-1)"/>
                        <path d="M110 22H114V102H110L110 22Z" fill="var(--rz-series-1)"/>
                        <path d="M32 22H34V102H32V22Z" fill="var(--rz-series-1)"/>
                        <path d="M118 22H120V102H118L118 22Z" fill="var(--rz-series-1)"/>
                        <path d="M40 22H44V102H40V22Z" fill="var(--rz-series-1)"/>
                        <path d="M126 22H130V102H126L126 22Z" fill="var(--rz-series-1)"/>
                        <path d="M48 22H50V102H48V22Z" fill="var(--rz-series-1)"/>
                        <path d="M134 22H136V102H134L134 22Z" fill="var(--rz-series-1)"/>
                        <path d="M56 22H60V102H56V22Z" fill="var(--rz-series-1)"/>
                        <path d="M142 22H146V102H142L142 22Z" fill="var(--rz-series-1)"/>
                        <path d="M64 22H66V102H64V22Z" fill="var(--rz-series-1)"/>
                        <path d="M150 22H152V102H150L150 22Z" fill="var(--rz-series-1)"/>
                        <path d="M70 22H72V102H70V22Z" fill="var(--rz-series-1)"/>
                        <path d="M156 22H158V102H156L156 22Z" fill="var(--rz-series-1)"/>
                        <rect x="80" y="22" width="4" height="88" fill="var(--rz-series-1)"/>
                        <path d="M166 22H170V102H166L166 22Z" fill="var(--rz-series-1)"/>
                        <path d="M88 22H90V102H88L88 22Z" fill="var(--rz-series-1)"/>
                        <rect x="174" y="22" width="2" height="88" fill="var(--rz-series-1)"/>
                        <path d="M92 22H94V102H92L92 22Z" fill="var(--rz-series-1)"/>
                        <path d="M96 22H98V102H96L96 22Z" fill="var(--rz-series-1)"/>
                        <path d="M102 22H106V102H102L102 22Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Barcode <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Radar Column Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/radar-column-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Radar Column chart thumbnail">
                        <circle cx="100" cy="66" r="42.5" stroke="var(--rz-chart-axis-color)" stroke-width="1"/>
                        <circle cx="100" cy="66" r="23.5" stroke="var(--rz-chart-axis-color)" stroke-width="1"/>
                        <path d="M150 66L50 66" stroke="var(--rz-chart-axis-color)" stroke-width="2" stroke-linecap="round"/>
                        <path d="M124.996 109.299L74.9961 22.6963" stroke="var(--rz-chart-axis-color)" stroke-width="2" stroke-linecap="round"/>
                        <path d="M74.9961 109.294L124.996 22.6914" stroke="var(--rz-chart-axis-color)" stroke-width="2" stroke-linecap="round"/>
                        <path d="M123.282 38.3263L100 66L135.607 59.6738L123.282 38.3263Z" fill="var(--rz-series-1)"/>
                        <path d="M110.151 94.0004L100.001 66.0004L89.8514 94.0004L110.151 94.0004Z" fill="var(--rz-series-1)"/>
                        <path d="M70.6768 60.7896L100.001 65.9995L80.8268 43.2093L70.6768 60.7896Z" fill="var(--rz-series-1)"/>
                        <path d="M94.9262 51.9993L100.001 65.9993L105.076 51.9993L94.9262 51.9993Z" fill="var(--rz-series-1)"/>
                        <path d="M125.135 70.4656L100 66L116.435 85.5344L125.135 70.4656Z" fill="var(--rz-series-1)"/>
                        <path d="M79.0545 69.6754L100 65.9541L86.3045 82.2328L79.0545 69.6754Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Radar Column <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>
</RadzenRow>

@* --- Gauges --- *@
<RadzenText Anchor="charts#gauges" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-8 rz-pb-2">
    Gauges
</RadzenText>
<RadzenRow Gap="2rem" RowGap="2rem" class="chart-gallery">
    @* Arc Gauge *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/arc-gauge">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Arc Gauge chart thumbnail">
                        <path d="M100 26C144.183 26 180 61.8172 180 106H169C169 67.8924 138.108 37 100 37C61.8924 37 31 67.8924 31 106H20C20 61.8172 55.8172 26 100 26Z" fill="var(--rz-chart-axis-color)"/>
<path d="M100 26C107.176 26 114.13 26.9459 120.747 28.7178L117.899 39.3447C112.191 37.8156 106.191 37 100 37C61.8924 37 31 67.8924 31 106H20C20 61.8172 55.8172 26 100 26Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Arc Gauge</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Linear Gauge *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/linear-gauge">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Linear Gauge chart thumbnail">
                        <rect width="12" height="160" transform="matrix(-4.37114e-08 -1 -1 4.37114e-08 180 72)" fill="var(--rz-chart-axis-color)"/>
                        <rect width="12" height="100" transform="matrix(-4.37114e-08 -1 -1 4.37114e-08 120 72)" fill="var(--rz-series-1)"/>
                        <path d="M124 78H116L120 73L124 78Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Linear Gauge <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Radial Gauge *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/radial-gauge">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Radial Gauge chart thumbnail">
                        <path d="M100 20C136.451 20 166 49.5492 166 86C166 95.0983 164.158 103.766 160.828 111.652L150.678 107.406C153.46 100.827 155 93.5932 155 86C155 55.6243 130.376 31 100 31C69.6243 31 45 55.6243 45 86C45 93.4566 46.4843 100.566 49.1729 107.051L39.0225 111.296C35.787 103.505 34 94.9614 34 86C34 49.5492 63.5492 20 100 20Z" fill="var(--rz-chart-axis-color)"/>
                        <path d="M100 20C112.069 20 123.381 23.2398 133.114 28.8965L127.613 38.4248C119.498 33.7043 110.065 31 100 31C69.6243 31 45 55.6243 45 86C45 93.4566 46.4843 100.566 49.1729 107.051L39.0225 111.296C35.787 103.505 34 94.9614 34 86C34 49.5492 63.5492 20 100 20Z" fill="var(--rz-series-1)"/>
                        <path d="M123.108 47L100.014 87.0003" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Radial Gauge</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Styling Gauge *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/styling-gauge">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Styling Gauge chart thumbnail">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M100 20C125.405 20 146 40.5949 146 66C146 91.4051 125.405 112 100 112C74.5949 112 54 91.4051 54 66C54 40.5949 74.5949 20 100 20ZM100 31C80.67 31 65 46.67 65 66C65 85.33 80.67 101 100 101C119.33 101 135 85.33 135 66C135 46.67 119.33 31 100 31Z" fill="#F92063" opacity="0.4" />
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M100 31C119.33 31 135 46.67 135 66C135 85.33 119.33 101 100 101C80.67 101 65 85.33 65 66C65 46.67 80.67 31 100 31ZM100 42C86.7452 42 76 52.7452 76 66C76 79.2548 86.7452 90 100 90C113.255 90 124 79.2548 124 66C124 52.7452 113.255 42 100 42Z" fill="#CBFF00" opacity="0.4"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M100 42C113.255 42 124 52.7452 124 66C124 79.2548 113.255 90 100 90C86.7452 90 76 79.2548 76 66C76 52.7452 86.7452 42 100 42ZM100 53C92.8203 53 87 58.8203 87 66C87 73.1797 92.8203 79 100 79C107.18 79 113 73.1797 113 66C113 58.8203 107.18 53 100 53Z" fill="#00FDEA" opacity="0.4"/>
                        <path d="M99.999 20C125.404 20 145.999 40.5949 145.999 66C145.999 91.4051 125.404 112 99.999 112C88.7278 112 78.4054 107.944 70.4062 101.215L77.4824 92.7939C83.5688 97.914 91.423 101 99.999 101C119.329 101 134.999 85.33 134.999 66C134.999 46.67 119.329 31 99.999 31V20Z" fill="#F92063"/>
                        <path d="M100 31C119.33 31 135 46.67 135 66C135 78.9015 128.018 90.1704 117.628 96.2402L112.087 86.7363C119.212 82.5742 124 74.847 124 66C124 52.7452 113.255 42 100 42V31Z" fill="#CBFF00"/>
                        <path d="M100.001 42C113.256 42 124.001 52.7452 124.001 66C124.001 79.2548 113.256 90 100.001 90C90.3626 90 82.0522 84.3179 78.2344 76.1211L88.2109 71.4814C90.2788 75.9217 94.7799 79 100.001 79C107.181 79 113.001 73.1797 113.001 66C113.001 58.8203 107.181 53 100.001 53V42Z" fill="#00FDEA"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Styling Gauge</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>
</RadzenRow>

@* --- Zoom & Navigation --- *@
<RadzenText Anchor="charts#zoom-navigation" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-8 rz-pb-2">
    Zoom &amp; Navigation
</RadzenText>
<RadzenRow Gap="2rem" RowGap="2rem" class="chart-gallery">
    @* Zoom and Pan *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/zoom-pan-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Zoom and Pan chart thumbnail">
                        <path d="M164 46C154.711 46 145 62 132 62M36 70C49 70 55 80 68 80C75.8181 80 81.1044 69.1499 86.9042 60.5" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M87 58C90.8333 58 90.8333 54 94.6667 54C98.5 54 98.5 62 102.333 62C106.167 62 106.167 49 110 49C113.833 49 113.833 68 117.667 68C121.5 68 121.5 56 125.333 56C129.167 56 129.167 62 133 62" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M110 32C123.807 32 135 43.1929 135 57C135 63.1836 132.753 68.8408 129.033 73.2051L152.284 96.4551L149.456 99.2842L126.205 76.0332C121.841 79.7526 116.184 82 110 82C96.1929 82 85 70.8071 85 57C85 43.1929 96.1929 32 110 32ZM110 36C98.402 36 89 45.402 89 57C89 68.598 98.402 78 110 78C121.598 78 131 68.598 131 57C131 45.402 121.598 36 110 36Z" fill="var(--rz-chart-axis-label-color)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Zoom and Pan <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Range Navigator *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/range-navigator">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Range Navigator chart thumbnail">
                        <path d="M172 36C164 36 164 41 156 41C148 41 148 36 140 36C132 36 132 49 124 49C116 49 116 40 108 40C100 40 100 57 92 57C84 57 84 46 76 46C68 46 68 57 60 57C52 57 52 48 44 48C36 48 36 64 28 64" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M44 108C48 108 48 105 52 105C56 105 56 97 60 97C64 97 64 101.5 68 101.5C72 101.5 72 94 76 94C80 94 80 99.5 84 99.5C88 99.5 88 93 92 93C96 93 96 97.5 100 97.5C104 97.5 104 93 108 93C112 93 112 95.5 116 95.5C120 95.5 120 93 124 93" stroke="var(--rz-series-1)" stroke-width="1.5" stroke-linecap="round"/>
                        <path d="M44 108C40 108 40 97 36 97C32 97 32 100 28 100C24 100 24 89.5 20 89.5" stroke="var(--rz-series-1)" stroke-width="1.5" stroke-linecap="round"/>
                        <path d="M124 93C128 93 128 91.5 132 91.5C136 91.5 136 105 140 105C144 105 144 97.5 148 97.5C152 97.5 152 93 156 93C160 93 160 96.5 164 96.5C168 96.5 168 102 172 102C176 102 176 93.5 180 93.5" stroke="var(--rz-series-1)" stroke-width="1.5" stroke-linecap="round"/>
                        <path opacity="0.8" d="M52 112H22C19.7909 112 18 110.209 18 108V89C18 86.7909 19.7909 85 22 85H52V112ZM178 85C180.209 85 182 86.7909 182 89V108C182 110.209 180.209 112 178 112H124V85H178Z" fill="var(--rz-base-background-color)"/>
                        <path d="M22 85.5H178C179.933 85.5 181.5 87.067 181.5 89V108C181.5 109.933 179.933 111.5 178 111.5H22C20.067 111.5 18.5 109.933 18.5 108V89C18.5 87.067 20.067 85.5 22 85.5Z" stroke="var(--rz-chart-axis-color)"/>
                        <rect x="124" y="85" width="1" height="27" fill="var(--rz-chart-axis-color)"/>
                        <rect x="51" y="85" width="1" height="27" fill="var(--rz-chart-axis-color)"/>
                        <circle cx="124.5" cy="98.5" r="2.5" fill="var(--rz-chart-axis-color)"/>
                        <circle cx="51.5" cy="98.5" r="2.5" fill="var(--rz-chart-axis-color)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Range Navigator <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>
</RadzenRow>

@* --- Configuration --- *@
<RadzenText Anchor="charts#configuration" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-8 rz-pb-2">
    Configuration
</RadzenText>
<RadzenRow Gap="2rem" RowGap="2rem" class="chart-gallery">
    @* Series *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/chart-series">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Series chart thumbnail">
                        <path d="M156 39C156 37.8954 156.895 37 158 37H168C169.105 37 170 37.8954 170 39V112H156V39Z" fill="var(--rz-series-8)"/>
                        <path d="M138 59C138 57.8954 138.895 57 140 57H150C151.105 57 152 57.8954 152 59V112H138V59Z" fill="var(--rz-series-7)"/>
                        <path d="M120 56C120 54.8954 120.895 54 122 54H132C133.105 54 134 54.8954 134 56V112H120V56Z" fill="var(--rz-series-6)"/>
                        <path d="M102 85C102 83.8954 102.895 83 104 83H114C115.105 83 116 83.8954 116 85V112H102V85Z" fill="var(--rz-series-5)"/>
                        <path d="M84 68C84 66.8954 84.8954 66 86 66H96C97.1046 66 98 66.8954 98 68V112H84V68Z" fill="var(--rz-series-4)"/>
                        <path d="M66 95C66 93.8954 66.8954 93 68 93H78C79.1046 93 80 93.8954 80 95V112H66V95Z" fill="var(--rz-series-3)"/>
                        <path d="M48 72C48 70.8954 48.8954 70 50 70H60C61.1046 70 62 70.8954 62 72V112H48V72Z" fill="var(--rz-series-2)"/>
                        <path d="M30 79C30 77.8954 30.8954 77 32 77H42C43.1046 77 44 77.8954 44 79V112H30V79Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Series</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Axis *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/chart-axis">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Axis chart thumbnail">
                        <path d="M22 112V21.5" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M22 112H178" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 92H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 72H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 52H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 32H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path d="M164 39C156 39 156 52 148 52C140 52 140 47 132 47C124 47 124 64 116 64C108 64 108 55 100 55C92 55 92 76 84 76C76 76 76 65 68 65C60 65 60 80 52 80C44 80 44 71 36 71" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Axis</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Multiple Axes *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/multiple-axes-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Multiple Axes chart thumbnail">
                        <path d="M22 112V21.5" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M164 112V21.5" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M174 112V21.5" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M22 112H154" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 92H154" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 72H154" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 52H154" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 32H154" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path d="M40 71C48 71 48 80 56 80C64 80 64 65 72 65C80 65 80 76 88 76C96 76 96 55 104 55C112 55 112 64 120 64C128 64 128 47 136 47" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Multiple Axes <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Inverted Axis *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/inverted-axis-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Inverted Axis chart thumbnail">
                        <path d="M178 112V21.5" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M22 112H178" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 92H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 72H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 52H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 32H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path d="M164 39C156 39 156 52 148 52C140 52 140 47 132 47C124 47 124 64 116 64C108 64 108 55 100 55C92 55 92 76 84 76C76 76 76 65 68 65C60 65 60 80 52 80C44 80 44 71 36 71" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Inverted Axis <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Axis Crossing *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/axis-crossing-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Axis Crossing chart thumbnail">
                        <path d="M100 112V21.5" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M22 66H178" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 106H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 86H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 46H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 26H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path d="M164 39C156 39 156 52 148 52C140 52 140 47 132 47C124 47 124 64 116 64C108 64 108 55 100 55C92 55 92 76 84 76C76 76 76 65 68 65C60 65 60 80 52 80C44 80 44 71 36 71" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Axis Crossing <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Logarithmic Axis *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/logarithmic-axis-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Logarithmic Axis chart thumbnail">
                        <path d="M22 112V21.5" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M22 112H178" stroke="var(--rz-chart-axis-color)" stroke-width="3" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 73H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 55H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 43H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 36H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path d="M163 36L132 43L100.001 55.0001L68.001 73.0002L36 96.0002" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Logarithmic Axis <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Indexed Category Axis *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/indexed-category-axis-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Indexed Category Axis chart thumbnail">
                        <path d="M168 31C168 29.8954 168.895 29 170 29H180C181.105 29 182 29.8954 182 31V100H168L168 31Z" fill="var(--rz-series-2)"/>
                        <path d="M150 51C150 49.8954 150.895 49 152 49H162C163.105 49 164 49.8954 164 51V100H150L150 51Z" fill="var(--rz-series-1)"/>
                        <path d="M124 48C124 46.8954 124.895 46 126 46H136C137.105 46 138 46.8954 138 48V100H124L124 48Z" fill="var(--rz-series-2)"/>
                        <path d="M106 77C106 75.8954 106.895 75 108 75H118C119.105 75 120 75.8954 120 77V100H106L106 77Z" fill="var(--rz-series-1)"/>
                        <path d="M80 64C80 62.8954 80.8954 62 82 62H92C93.1046 62 94 62.8954 94 64V100H80L80 64Z" fill="var(--rz-series-2)"/>
                        <path d="M62 71C62 69.8954 62.8954 69 64 69H74C75.1046 69 76 69.8954 76 71V100H62L62 71Z" fill="var(--rz-series-1)"/>
                        <path d="M36 53C36 51.8954 36.8954 51 38 51H48C49.1046 51 50 51.8954 50 53V100H36L36 53Z" fill="var(--rz-series-2)"/>
                        <path d="M18 64C18 62.8954 18.8954 62 20 62H30C31.1046 62 32 62.8954 32 64V100H18L18 64Z" fill="var(--rz-series-1)"/>
                        <path d="M25 108H43" stroke="var(--rz-chart-axis-label-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M69 108H87" stroke="var(--rz-chart-axis-label-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M113 108H131" stroke="var(--rz-chart-axis-label-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M157 108H175" stroke="var(--rz-chart-axis-label-color)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Indexed Category Axis <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" Style="vertical-align: text-top;" /></RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Legend *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/chart-legend">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Legend chart thumbnail">
                    <path d="M20 77L36 71L52 55L68 64L84 49L100 60L116 39L132 48L148 31L164 36L180 23" stroke="var(--rz-series-1)" stroke-width="2" stroke-linecap="round"/>
                    <path d="M20 77L36 71L52 55L68 64L84 49L100 60L116 39L132 48L148 31L164 36L180 23" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                    <path d="M20 81L36 83L52 74L68 80L84 68L100 83L116 63L132 77L148 58L164 69L180 60" stroke="var(--rz-series-2)" stroke-width="3" stroke-linecap="round"/>
                    <path d="M72 107.5H90" stroke="var(--rz-chart-axis-label-color)" stroke-width="3" stroke-linecap="round"/>
                    <path d="M124 107.5H142" stroke="var(--rz-chart-axis-label-color)" stroke-width="3" stroke-linecap="round"/>
                    <circle cx="62.5" cy="107.5" r="4.5" fill="var(--rz-series-1)"/>
                    <circle cx="114.5" cy="107.5" r="4.5" fill="var(--rz-series-2)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Legend</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* ToolTip *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/chart-tooltip">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ToolTip chart thumbnail">
<path d="M156 39C156 37.8954 156.895 37 158 37H168C169.105 37 170 37.8954 170 39V112H156V39Z" fill="var(--rz-series-1)" opacity="0.4"/>
<path d="M138 59C138 57.8954 138.895 57 140 57H150C151.105 57 152 57.8954 152 59V112H138V59Z" fill="var(--rz-series-1)" opacity="0.4"/>
<path d="M120 56C120 54.8954 120.895 54 122 54H132C133.105 54 134 54.8954 134 56V112H120V56Z" fill="var(--rz-series-1)" opacity="0.4"/>
<path d="M102 85C102 83.8954 102.895 83 104 83H114C115.105 83 116 83.8954 116 85V112H102V85Z" fill="var(--rz-series-1)" opacity="0.4"/>
<path d="M84 68C84 66.8954 84.8954 66 86 66H96C97.1046 66 98 66.8954 98 68V112H84V68Z" fill="var(--rz-series-1)" opacity="0.4"/>
<path d="M66 95C66 93.8954 66.8954 93 68 93H78C79.1046 93 80 93.8954 80 95V112H66V95Z" fill="var(--rz-series-1)" opacity="0.4"/>
<path d="M48 72C48 70.8954 48.8954 70 50 70H60C61.1046 70 62 70.8954 62 72V112H48V72Z" fill="var(--rz-series-1)" opacity="0.4"/>
<path d="M30 79C30 77.8954 30.8954 77 32 77H42C43.1046 77 44 77.8954 44 79V112H30V79Z" fill="var(--rz-series-1)" opacity="0.4"/>
<path d="M70 43C70 41.3431 71.3431 40 73 40H109C110.657 40 112 41.3431 112 43V55C112 56.6569 110.657 58 109 58H96.4419C95.5305 58 94.6686 58.4143 94.0993 59.1259L91 63L87.9007 59.1259C87.3314 58.4143 86.4695 58 85.5581 58H73C71.3431 58 70 56.6569 70 55V43Z" fill="var(--rz-series-1)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">ToolTip</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Label Rotation *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/chart-label-rotation">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Label Rotation chart thumbnail">
                        <path opacity="0.3" d="M22 87H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 67H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 47H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path opacity="0.3" d="M22 27H178" stroke="var(--rz-chart-axis-color)" stroke-linecap="round"/>
                        <path d="M164 38C154.711 38 145 54 132 54C119 54 113 42 100 42C87 42 81 72 68 72C55 72 49 62 36 62" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M28 104.864L36.4853 96.379" stroke="var(--rz-chart-axis-label-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M60 104.864L68.4853 96.379" stroke="var(--rz-chart-axis-label-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M92 104.864L100.485 96.379" stroke="var(--rz-chart-axis-label-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M124 104.864L132.485 96.379" stroke="var(--rz-chart-axis-label-color)" stroke-width="3" stroke-linecap="round"/>
                        <path d="M156 104.864L164.485 96.379" stroke="var(--rz-chart-axis-label-color)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Label Rotation</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Interpolation *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/chart-interpolation">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Interpolation chart thumbnail">
                        <path d="M20 101H36V95H52V79H68V88H84V73H100V84H116V63H132V72H148V55H164V52.5V47H180V112H20V101Z" fill="var(--rz-series-2)" fill-opacity="0.3"/>
                        <path d="M20 73H36V67H52V55H68V60H84V49H100V56H116V39H132V44H148V35H164V32.5V27H180" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round" stroke-dasharray="2 8"/>
                        <path d="M20 109H36V103H52M180 63H164V68.5V71H148M84 85H100V92H116V75H132" stroke="var(--rz-series-3)" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Interpolation</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Annotations *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/chart-annotations">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Annotations chart thumbnail">
                    <path d="M20 81L36 75L52 59L68 68L84 53L100 64L116 43L132 52L148 35L164 40L180 27" stroke="var(--rz-series-1)" stroke-width="3" stroke-linecap="round"/>
                    <path d="M20 97L36 99L52 90L68 96L84 84L100 99L116 79L132 93L148 74L164 85L180 76" stroke="var(--rz-series-2)" stroke-width="3" stroke-linecap="round"/>
                    <circle cx="84" cy="54" r="5" fill="var(--rz-chart-axis-label-color)"/>
                    <circle cx="148" cy="74" r="5" fill="var(--rz-chart-axis-label-color)"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Annotations</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>

    @* Styling Chart *@
    <RadzenColumn Size="6" SizeMD="4" SizeLG="3">
        <RadzenLink Path="/styling-chart">
            <RadzenCard Variant="Variant.Text" class="rz-p-0">
                <div class="chart-gallery-thumb">
                    <svg viewBox="0 0 200 132" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Styling Chart chart thumbnail">
                        <path d="M156 42C156 40.8954 156.895 40 158 40H168C169.105 40 170 40.8954 170 42V112H156V42Z" fill="#FFA600"/>
                        <path d="M138 61C138 59.8954 138.895 59 140 59H150C151.105 59 152 59.8954 152 61V112H138V61Z" fill="#FF7C43"/>
                        <path d="M120 68C120 66.8954 120.895 66 122 66H132C133.105 66 134 66.8954 134 68V112H120V68Z" fill="#F95D6A"/>
                        <path d="M102 95C102 93.8954 102.895 93 104 93H114C115.105 93 116 93.8954 116 95V112H102V95Z" fill="#D45087"/>
                        <path d="M84 72C84 70.8954 84.8954 70 86 70H96C97.1046 70 98 70.8954 98 72V112H84V72Z" fill="#A05195"/>
                        <path d="M66 79C66 77.8954 66.8954 77 68 77H78C79.1046 77 80 77.8954 80 79V112H66V79Z" fill="#665191"/>
                        <path d="M48 61C48 59.8954 48.8954 59 50 59H60C61.1046 59 62 59.8954 62 61V112H48V61Z" fill="#2F4B7C"/>
                        <path d="M30 72C30 70.8954 30.8954 70 32 70H42C43.1046 70 44 70.8954 44 72V112H30V72Z" fill="#003F5C"/>
                    </svg>
                </div>
                <RadzenText TextStyle="TextStyle.Body1" class="rz-pb-4 rz-text-align-center">Styling Chart</RadzenText>
            </RadzenCard>
        </RadzenLink>
    </RadzenColumn>
</RadzenRow>

