<wc-pie-chart>

Installation

<script type="module" src="https://unpkg.com/wc-pie-chart/wc-pie-chart.js"></script>

Alternatively

<script type="module" src="https://cdn.skypack.dev/wc-pie-chart/wc-pie-chart.js"></script>

After the next release you can use it minified by adding using this instead:

<script type="module" src="[WHATEVER CDN]/wc-pie-chart/dist/wc-pie-chart.min.js"></script>

Please remember to change [WHATEVER CDN] to your favourite CDN

Examples

Basic Example (my original colours)

This has its attributes changed via JS in an external file.

In one case we increase the thickness to 0.5 to create a pie-chart, rather than a donut-chart.

Another basic example

This is an empty div which is populated with this script:

const test = document.getElementById('test')
const segments = Math.floor(Math.random() * 10) + 5;
const newPieChart = document.createElement('wc-pie-chart')
newPieChart.setAttribute('width', '500')
for(let i = 0; i < segments; i++){
  const newPieSlice = document.createElement('wc-pie-slice')
  newPieSlice.setAttribute('value', `${Math.floor(Math.random() * 100) + 1}`)
  newPieChart.append(newPieSlice)
}
test.append(newPieChart)

If you refresh the page, it should change.