Chart Doughnut
A doughnut chart is a circular chart with a blank center. The chart is similar to a pie chart with the center cut out. The area in the center can be used to display information.
Usage
<base-button id="randomize">Randomize</base-button>
<br>
<pc-chart-doughnut width="400" margin="20"></pc-chart-doughnut>
<script>
const chart = document.querySelector('pc-chart-doughnut');
chart.label = "Browsers";
chart.data = [
{ label: 'Firefox', value: 10, color: '--color-red-60', hoverColor: '--color-red-40' },
{ 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>
On this page