Pie Chart

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--green-3 zet je de magenta tinten.

  • Betaald: €801,35
  • Betaling mistlukt: €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 mistlukt: €1.202,00

Pie automatische kleuren

Gebruik pie-chart__part--bigwanneer 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