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

  Randomize
  
<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
 Previous Next