Home Components Chart Pie
Chart Pie
Overview Playground API
A pie chart (also known as a circle chart) is a circular statistical graphic that visually represents numerical proportions. It is commonly used to illustrate how parts relate to the whole for a specific categorical variable.
Usage
Randomize 

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

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


  <script>
    const chart = document.querySelector('goat-chart-pie');
    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>
Usage
Work in progress
Properties
Events
Methods
CSS Custom Properties
Previous Next