                        <div class="page-header">
                            <div>
                                <h1>Charts</h1>
                                <p class="subtitle">Chart.js 4.5 visualisations — line, bar, doughnut, pie, polar, radar, and horizontal bars.</p>
                            </div>
                            <div class="page-header__actions">
                                <button type="button" class="m-btn m-btn--ghost">
                                    <i class="fa-solid fa-download" aria-hidden="true"></i>
                                    Export
                                </button>
                            </div>
                        </div>

                        <div class="row row-tight">
                            <div class="col-lg-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">Yearly sales</h2>
                                            <p class="m-card__subtitle">Monthly revenue, last 12 months.</p>
                                        </div>
                                    </header>
                                    <div style="height: 280px; position: relative;"><canvas id="sales-chart"></canvas></div>
                                </section>
                            </div>
                            <div class="col-lg-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">Team commits</h2>
                                            <p class="m-card__subtitle">Distribution by discipline.</p>
                                        </div>
                                    </header>
                                    <div style="height: 280px; position: relative;"><canvas id="team-chart"></canvas></div>
                                </section>
                            </div>
                            <div class="col-lg-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">Bar chart</h2>
                                            <p class="m-card__subtitle">Quarterly revenue.</p>
                                        </div>
                                    </header>
                                    <div style="height: 280px; position: relative;"><canvas id="barChart"></canvas></div>
                                </section>
                            </div>
                            <div class="col-lg-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">Radar chart</h2>
                                            <p class="m-card__subtitle">Current vs. target system metrics.</p>
                                        </div>
                                    </header>
                                    <div style="height: 280px; position: relative;"><canvas id="radarChart"></canvas></div>
                                </section>
                            </div>
                            <div class="col-lg-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">Line chart</h2>
                                            <p class="m-card__subtitle">Visits vs. downloads, last 6 weeks.</p>
                                        </div>
                                    </header>
                                    <div style="height: 280px; position: relative;"><canvas id="lineChart"></canvas></div>
                                </section>
                            </div>
                            <div class="col-lg-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">Doughnut chart</h2>
                                            <p class="m-card__subtitle">Traffic by device.</p>
                                        </div>
                                    </header>
                                    <div style="height: 280px; position: relative;"><canvas id="doughutChart"></canvas></div>
                                </section>
                            </div>
                            <div class="col-lg-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">Pie chart</h2>
                                            <p class="m-card__subtitle">Browser market share.</p>
                                        </div>
                                    </header>
                                    <div style="height: 280px; position: relative;"><canvas id="pieChart"></canvas></div>
                                </section>
                            </div>
                            <div class="col-lg-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">Polar area chart</h2>
                                            <p class="m-card__subtitle">Product distribution.</p>
                                        </div>
                                    </header>
                                    <div style="height: 280px; position: relative;"><canvas id="polarChart"></canvas></div>
                                </section>
                            </div>
                            <div class="col-lg-6">
                                <section class="m-card">
                                    <header class="m-card__header">
                                        <div>
                                            <h2 class="m-card__title">Horizontal bar chart</h2>
                                            <p class="m-card__subtitle">Skill proficiency.</p>
                                        </div>
                                    </header>
                                    <div style="height: 280px; position: relative;"><canvas id="singelBarChart"></canvas></div>
                                </section>
                            </div>
                        </div>

                        <div class="row" style="margin-top: 28px;">
                            <div class="col-md-12">
                                <div class="copyright">
                                    <p>Copyright © 2026 Colorlib. All rights reserved. Template by <a href="https://colorlib.com" rel="nofollow" target="_blank">Colorlib</a>.</p>
                                </div>
                            </div>
                        </div>
