<div class="portfolio-widget">
  <h3>Portfolio Allocation</h3>
  <canvas id="portfolioDonut"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('portfolioDonut');

  new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ['Tesla', 'Palantir', 'Bitcoin', 'Euro Stoxx 50', 'NASDAQ 100'],
      datasets: [{
        data: [20, 20, 20, 15, 25],
        backgroundColor: [
          '#e82127', // Tesla rot
          '#000000', // Palantir schwarz
          '#d4af37', // Bitcoin gold
          '#2563eb', // Euro Stoxx 50 blau
          '#6b7280'  // NASDAQ grau
        ],
        borderWidth: 5,
        borderColor: '#ffffff',
        hoverOffset: 10
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false, // wichtig für Größe
      cutout: '70%',
      plugins: {
        legend: {
          position: 'bottom',
          labels: {
            usePointStyle: true,
            padding: 24,
            font: {
              size: 14,
              family: 'Inter, sans-serif'
            }
          }
        },
        tooltip: {
          callbacks: {
            label: function(context) {
              return `${context.label}: ${context.raw}%`;
            }
          }
        }
      }
    }
  });
</script>