Grafik batang
Grafik batang tanpa pustaka apa pun: tinggi batang diatur lewat gaya sebaris, label sumbu memakai flex. Cukup untuk rapor dan laporan kelas.
Batang tegak
Tinggi batang ditulis sebagai persentase pada style="height:…%". Nilai ditaruh di atas batang, nama kategori di bawahnya.
84
79
72
81
66
88
XII IPA 1XII IPA 2XI IPA 3XI IPA 1X IPA 2X IPA 1
Di atas 85
75–85
Di bawah 75
Lihat kode
<div class="ck-chart"> <div class="ck-chart__col"><span class="ck-chart__value">84</span><div class="ck-chart__bar " style="height:84%"></div></div><div class="ck-chart__col"><span class="ck-chart__value">79</span><div class="ck-chart__bar " style="height:79%"></div></div><div class="ck-chart__col"><span class="ck-chart__value">72</span><div class="ck-chart__bar ck-chart__bar--warning" style="height:72%"></div></div><div class="ck-chart__col"><span class="ck-chart__value">81</span><div class="ck-chart__bar " style="height:81%"></div></div><div class="ck-chart__col"><span class="ck-chart__value">66</span><div class="ck-chart__bar ck-chart__bar--warning" style="height:66%"></div></div><div class="ck-chart__col"><span class="ck-chart__value">88</span><div class="ck-chart__bar ck-chart__bar--success" style="height:88%"></div></div></div> <div class="ck-chart__labels"> <span class="ck-chart__label">XII IPA 1</span><span class="ck-chart__label">XII IPA 2</span><span class="ck-chart__label">XI IPA 3</span><span class="ck-chart__label">XI IPA 1</span><span class="ck-chart__label">X IPA 2</span><span class="ck-chart__label">X IPA 1</span></div> <div class="ck-legend ck-mt-4"> <span class="ck-legend__item"><span class="ck-legend__dot ck-legend__dot--success"></span>Di atas 85</span> <span class="ck-legend__item"><span class="ck-legend__dot"></span>75–85</span> <span class="ck-legend__item"><span class="ck-legend__dot ck-legend__dot--warning"></span>Di bawah 75</span> </div>
Warna & legenda
Tiga nada: primary (biasa), --warning, --success. Legenda memakai ck-legend.
45
70
55
92
Sebelumnya
Periode ini
Perlu perhatian
Target tercapai
Lihat kode
<div class="ck-stack-4"> <div class="ck-chart" style="height:8rem"> <div class="ck-chart__col"><span class="ck-chart__value">45</span><div class="ck-chart__bar ck-chart__bar--muted" style="height:45%"></div></div><div class="ck-chart__col"><span class="ck-chart__value">70</span><div class="ck-chart__bar " style="height:70%"></div></div><div class="ck-chart__col"><span class="ck-chart__value">55</span><div class="ck-chart__bar ck-chart__bar--warning" style="height:55%"></div></div><div class="ck-chart__col"><span class="ck-chart__value">92</span><div class="ck-chart__bar ck-chart__bar--success" style="height:92%"></div></div></div> <div class="ck-legend"> <span class="ck-legend__item"><span class="ck-legend__dot ck-legend__dot--muted"></span>Sebelumnya</span> <span class="ck-legend__item"><span class="ck-legend__dot"></span>Periode ini</span> <span class="ck-legend__item"><span class="ck-legend__dot ck-legend__dot--warning"></span>Perlu perhatian</span> <span class="ck-legend__item"><span class="ck-legend__dot ck-legend__dot--success"></span>Target tercapai</span> </div> </div>