<goat-button id="randomize">Randomize</goat-button>
  <br>

  <goat-chart-doughnut width="400" margin="20"></goat-chart-doughnut>


  <script>
    const chart = document.querySelector('goat-chart-doughnut');
    chart.label = "Browsers";
    chart.data = [
      { label: 'Firefox', value: 10, color: '--color-red-60', hoverColor: '--color-red-80' },
      { label: 'Chrome', value: 20, color: '--color-green-30', hoverColor: '--color-green-50' },
      { label: 'Microsoft Edge', value: 30 },
      { label: 'Internet Explorer', value: 40 },
      { label: 'MC Browser', value: 50 },
    ];

    function randomNumber(min, max) {
      return parseInt(Math.random() * (max - min) + min);
    }

    let count = 1;
    document.querySelector('#randomize').addEventListener('click', () => {
      chart.data = chart.data.map(d => ({ ...d, value: parseInt(Math.random() * 100) }));
      chart.width =  randomNumber(400, 600);
    });
  </script>