Chart Doughnut

  <wc-button id="randomize">Randomize</wc-button>
  
  <wc-chart-doughnut width="400" margin="20"></wc-chart-doughnut>


  <script>
    const chart = document.querySelector('wc-chart-doughnut');
    chart.label = "Browsers";
    chart.data = [
      { label: 'Firefox', name: 'firefox', value: 10, color: '#FF0000'},
      { label: 'Chrome', name: 'chrome', value: 20},
      { label: 'Microsoft Edge', name: 'microsoft', value: 30 },
      { label: 'Internet Explorer', name: 'ie', value: 40 },
      { label: 'MC Browser', name: 'mcb', 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>