Pie Chart
Geef met data-start
zet je de positie in graden. Met data-value
geef je de waarde van een partje in graden. Per partje moet je dus zelf uitrekenen waar deze begint.
Pie 12 betaaltermijnen
Met de modifier pie-chart__part--neutral-1
tot pie-chart__part--neutral-12
zet je grijstinten.
- Totaal te betalen: €1.202,00
Pie met mislukste betaaltermijnen
Met de modifier pie-chart__part--green-1
tot pie-chart__part--green-12
zet je de groene tinten. Met pie-chart__part--magenta-1
tot pie-chart__part--magenta-2
zet je de magenta tinten.
- Betaald: €801,35
- Betaling mislukt: €200,35
- Totaal te betalen: €400,65
Pie volledig
- Betaald: €1.202,00
- Totaal te betalen: €0,00
Pie met 1 partje
Bij een volledig gevulde pie-chart gebruik dan pie-chart--completed
. (groene border). Of het benadrukken van een fout pie-chart--error
(rode border).
- Betaald: €1.202,00
- Betalng mislukt: €1.202,00
Pie automatische kleuren
Gebruik pie-chart__part--big
wanneer je partje groter is dan 50%.
2.2%
2.2%
2.2%
2.2%
2.2%
5%
60%
- Werk
- Eten
- Slapen
- Studeren
- Reizen
- Sporten
- Gamen
Benodigde stylesheets
/uno/components/pie-chart/pie-chart.css