<div style="width: 80%; height: 400px; margin: 50px auto;">
        <h2 style="text-align: center;">Graphique des ventes mensuelles</h2>
     
    
       
        {!! $chart->container() !!}
    </div>

    <!-- Script nécessaire pour afficher le graphique -->
    {!! $chart->script() !!}




    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Graphique des Paiements</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .chart-container {
            position: relative;
            width: 50%; /* Largeur réduite pour un graphique plus compact */
            height: 400px;
            margin: 50px auto;
        }

        h2 {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <h2>État des Paiements</h2>
        {!! $chart->container() !!}
    </div>

    {!! $chart->script() !!}
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Produits les Plus Vendus</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .chart-container {
            position: relative;
            width: 80%;
            height: 500px; /* Hauteur adaptée */
            margin: 50px auto;
        }

        h2 {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <h2>Top 10 des Produits les Plus Vendus</h2>
        {!! $chart->container() !!}
    </div>

    {!! $chart->script() !!}
</body>
</html>