5 Chart Library Favorit Para Front-end Developer
Sebagai front-end developer, apalagi produk yang dikembangkan yaitu aplikasi monitoring dan analitik, tentunya akan banyak menyajikan data dalam bentuk chart agar data dapat dibaca pengguna dengan lebih efektif dan mudah dipahami. Kadang dan sering pula saya alami, penggunaan library yang kurang cocok akan mengakibatkan performa render data ke dalam chart menjadi kurang optimal sehingga user bisa mengalami lag pada browsernya, biasanya ini terjadi jika kita menyajikan dataset yang besar dengan banyak interaksi pada chart.
Di Netmonk, aplikasi monitoring jaringan, sejak awal develop hingga sekarang telah beberapa kali refactor library chart yang digunakan karena kebutuhan menampilkan data dalam jumlah besar.
Nah… dari beberapa pengalaman refactoring tadi, berikut saya review 5 library chart yang menjadi favorit para front-end developer karena penggunaannya yang mudah dan performa nya bagus saat diakses user.
1. Chart.js
Chart.js merupakan salah satu plugin javascript yang diciptakan untuk menampilkan chart dengan mudah dan cepat. Ada banyak sekali pilihan grafik yang bisa kamu pakai saat menggunakan Chartjs.
Untuk data-data yang sifatnya medium (tidak terlalu besar jumlah dataset nya), Chartjs sudah sangat powerful dengan tampilan yang sangat baik. Tetapi untuk dataset yang agak besar, plugin ini bisa mengalami lag render jika kita tidak men-disable interaction (hover, tooltip, dll…).
2. D3
Untuk menampilkan data dalam jumlah besar ke dalam grafik atau chart, D3 sangat cocok digunakan. D3 menggunakan konsep manipulasi Document Object Model (DOM). Sehingga kita bisa memilih elemen dan memberikan berbagai jenis transformasi ke elemen tersebut.
Sama seperti Charjs, D3 juga mempunyai banyak pilihan chart. Extended chart plugin dari komunitas juga banyak yang bisa kamu pakai.
3. Nivo
Sesuai deskripsi di dalam websitenya “Nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries”. Nivo menggunakan D3 yang dikhususkan untuk digunakan dalam React.js.
Dibandingkan memakai D3 secara langsung dalam React.js, penggunaan Nivo akan sangat membantumu karena wrapper nya sangat mudah dipakai dan dokumentasi nya juga sangat lengkap.
4. Highcharts
Selain ada versi gratisnya, Highcharts juga mempunyai Lisensi Komersial yang lebih lengkap fiturnya dan performa yang sangat baik saat render. Untuk data-data stock dan realtime data, Highcharts sangat cocok digunakan.
5. Chartist
Dengan mengusung tagline “Simple Responsive Charts”, bisa dibilang library satu ini mengkhususkan untuk tampilan chart yang responsive, artinya tampilannya akan menyesuaikan saat dibuka di berbagai screen size.
Library ini juga mempunyai ukuran yang sangat kecil, hanya sekitar 10KB dan tanpa menggunakan dependency lainnya. Dengan ukuran yang lightweight seperti ini aplikasi yang kita develop akan lebih cepat dimuat.
Sebenarnya masih banyak library-library chart yang bisa kamu pakai sesuai kebutuhan, semakin banyak kamu mengeksplorasi dan mencoba untuk menyajikan chart, maka kamu akan semakin memahami karakteristik dari masing-masing library.
Semoga tulisan ini bisa menjadi bahan pertimbanganmu dalam memilih library jika kamu mulai menampilkan chart pada aplikasi yang kamu develop.
Salam…
