Editor_HTML

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Demo_Chart.js</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h2>Grafico a Linee</h2>
    <canvas id="lineChart" width="400" height="200"></canvas>

<h2>Grafico a Barre</h2>
    <canvas id="barChart" width="400" height="200"></canvas>

<h2>Grafico a Torta</h2>
    <canvas id="pieChart" width="400" height="200"></canvas>

// Grafico a Barre
        var ctxBar = document.getElementById('barChart').getContext('2d');
        var barChart = new Chart(ctxBar, {
            type: 'bar',
            data: {
                labels: ['Prodotto A', 'Prodotto B', 'Prodotto C', 'Prodotto D'],
                datasets: [{
                    label: 'Quantità Vendute',
                    data: [200, 150, 80, 120],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'Vendite per Prodotto'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

// Grafico a Torta
        var ctxPie = document.getElementById('pieChart').getContext('2d');
        var pieChart = new Chart(ctxPie, {
            type: 'pie',
            data: {
                labels: ['Italia', 'Francia', 'Germania', 'Spagna'],
                datasets: [{
                    label: 'Quota di Mercato',
                    data: [40, 25, 20, 15],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 206, 86, 0.7)',
                        'rgba(75, 192, 192, 0.7)'
                    ]
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'Distribuzione Quota di Mercato'
                    }
                }
            }
        });
    </script>
</body>
</html>