Ketika melacak pasar keuangan dan pergerakan harga aset dari waktu ke waktu, Grafik Batang Lilin adalah alat visualisasi standar industri. Dengan menggabungkan empat titik harga utama—Buka, Tinggi, Rendah, dan Tutup (OHLC)—menjadi satu batang visual, grafik batang lilin menunjukkan volatilitas harga, rentang perdagangan, dan sentimen pasar dalam sekejap mata, menjadikannya penting untuk dashboard kinerja saham, pelacak kripto, dan tampilan perdagangan komoditas.
Mekanisme Batang Lilin
Di Apache ECharts, seri batang lilin dirender menggunakan type: 'candlestick' (atau alias 'k'). Setiap titik data memerlukan array berisi 4 nilai yang diurutkan secara eksplisit sebagai [Buka, Tutup, Terendah, Tertinggi]. Mesin grafik menggambar tubuh padat atau kosong antara Buka dan Tutup, dengan garis tipis “ekor” yang menjulur ke harga Terendah dan Tertinggi.
1. Pengaturan Dasar
Untuk membuat grafik batang lilin dasar, peta nilai waktu sepanjang sumbu X yang kontinu dan lewatkan [Buka, Tutup, Terendah, Tertinggi] array ke data seri Anda:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
xAxis: {
type: 'category',
data: ['2026-05-01', '2026-05-02', '2026-05-03', '2026-05-04', '2026-05-05']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'candlestick',
data: [
[20, 34, 10, 38], // [Buka, Tutup, Terendah, Tertinggi] -> Bullish (Tutup > Buka)
[40, 35, 30, 50], // Bearish (Tutup < Buka)
[31, 38, 33, 44],
[38, 15, 5, 42],
[15, 28, 10, 32]
]
}
]
};
Teknik Struktural Lanjutan
Grafik batang lilin dapat disesuaikan dengan konvensi warna internasional, rentang waktu yang diperbesar, atau digabungkan dengan rata-rata bergerak.
1. Warna Kustom dan Rata-rata Bergerak
Sesuaikan warna batang bullish (naik) dan bearish (turun) menggunakan itemStyle, dan tampilkan garis rata-rata bergerak dengan menggabungkan seri garis dengan seri batang lilin:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['K Harian', 'MA5']
},
xAxis: {
type: 'category',
data: ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
name: 'K Harian',
type: 'candlestick',
data: [
[2320, 2320, 2287, 2362],
[2300, 2291, 2288, 2341],
[2295, 2312, 2290, 2380],
[2315, 2330, 2310, 2360],
[2330, 2325, 2312, 2355],
[2325, 2350, 2320, 2370],
[2350, 2340, 2330, 2385]
],
itemStyle: {
color: '#eb4d4b', // Warna untuk bullish (Tutup > Buka)
color0: '#6ab04c', // Warna untuk bearish (Tutup < Buka)
borderColor: '#eb4d4b',
borderColor0: '#6ab04c'
}
},
{
name: 'MA5',
type: 'line',
smooth: true,
data: [null, null, null, null, 2310, 2321, 2329],
lineStyle: { opacity: 0.8, width: 2 }
}
]
};
Penyesuaian Layout dan Zoom Interaktif
Menambahkan kontrol zoom time-series memberikan fleksibilitas bagi pengguna saat menavigasi catatan perdagangan historis yang padat.
1. Kontrol Zoom Data dan Penunjuk Sumbu
Integrasikan penggeser horizontal dan zoom dengan roda mouse menggunakan blok konfigurasidataZoom blok konfigurasi:
option = {
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: ['Hari 1', 'Hari 2', 'Hari 3', 'Hari 4', 'Hari 5', 'Hari 6', 'Hari 7', 'Hari 8']
},
yAxis: {
type: 'value',
scale: true
},
dataZoom: [
{
type: 'inside', // Mengaktifkan zoom dengan roda mouse
start: 20,
end: 100
},
{
type: 'slider', // Geser zoom visual di bagian bawah
show: true,
top: '90%'
}
],
series: [
{
type: 'candlestick',
data: [
[100, 110, 95, 115],
[110, 105, 100, 112],
[105, 120, 104, 125],
[120, 118, 112, 122],
[118, 125, 115, 128],
[125, 122, 120, 130],
[122, 135, 121, 138],
[135, 130, 128, 140]
]
}
]
};
Praktik Terbaik Strategis
- Urutkan Data dengan Benar:Periksa kembali struktur array! ECharts mengharapkan
[Buka, Tutup, Terendah, Tertinggi]—menukar Tutup dan Terendah adalah sumber umum kesalahan tampilan. - Aktifkan
scale: truepada Sumbu Y: Selalu sertakanscale: truepada sumbu harga numerik agar grafik menyesuaikan secara otomatis dengan rentang harga saat ini, bukan memaksa titik asal menjadi nol. - Gunakan Penunjuk Sumbu Silang: Atur
tooltip.axisPointer.type = 'cross'untuk menampilkan garis referensi vertikal dan horizontal yang terus-menerus, memudahkan penyesuaian harga dan timestamp.