Grafik · Aurivo Dash

Tanpa Chart.js, tanpa CDN. Semua grafik di halaman ini dirender oleh assets/js/charts.js (± 20 KB) memakai SVG dan otomatis mengikuti warna skin/tema aktif — bukti bahwa template benar-benar bisa offline. Grafik juga ikut berubah warna saat Anda mengganti skin di panel kanan.

Garis multi-seri (dengan tooltip)

Arahkan kursor ke grafik

Area bertumpuk (gradien)

Batang berkelompok

Batang bertumpuk

Donut (cincin)

Radial (persen)

Batang horizontal

Sparkline (mini chart untuk kartu & tabel)

Cocok untuk small-box / KPI

Pendapatan

Rp 128,4 jt

Pengunjung

42.180

Order

1.284

Retur

0,8%

Grafik di dalam tab tersembunyi otomatis digambar ketika tab dibuka (tidak gepeng) berkat IntersectionObserver di charts.js.

Cara memakai lewat JavaScript

Untuk data dinamis, panggil API berikut (semua parameter opsional kecuali yang bertanda *):

// Ganti data grafik kapan saja — sudah otomatis mengikuti tema
Charts.line(document.getElementById("grafik"), {
  labels: ["Jan", "Feb", "Mar"],
  height: 280,
  formatter: "compact",          // number | compact | idr | percent
  series: [
    { name: "Penjualan", data: [42, 48, 51], color: "primary" },
    { name: "Target",    data: [45, 46, 50], color: "success", area: false, dashed: true }
  ]
});

Charts.bar(el,  { labels, series, stacked: true });
Charts.hbar(el, { labels, values, color: "info" });
Charts.donut(el,{ data: [{label:"A", value:10, color:"primary"}], centerLabel: "Total" });
Charts.radial(el,{ value: 72, max: 100, color: "success", label: "Kuota" });
Charts.sparkline(el, { data: [1,4,2,6,5,9], color: "#fff", type: "area" });
Charts.refreshAll();            // gambar ulang semua grafik (mis. setelah ganti skin)

Versi deklaratif juga tersedia: cukup tulis data-chart="line" + data-values="…" pada sebuah <div>, maka grafik langsung muncul tanpa JS tambahan.

Grafik & Visualisasi