Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon React Charting Contoh Kode


React Charting Contoh Kode


Berikut adalah beberapa contoh perpustakaan react chart dengan fitur dan contoh masing -masing:

1. React Chartjs 2

- Fitur: Berbagai jenis bagan seperti garis, batang, pai, dan banyak lagi.
- Contoh:
- Bagan batang vertikal
- Bagan batang horizontal
- Bagan batang bertumpuk
- Bagan batang yang dikelompokkan
- Bagan area
- Bagan garis
- Bagan Garis Multiaxis
- Bagan PIE
- Bagan donat
- Bagan Area Kutub
- Bagan radar
- Bagan sebar
- Bagan Bubble
- Bagan MultityPe
- Bagan acara
- Bagan Ref
- Bagan gradien

2. React Google Charts

- Features: Various chart types like area, bar, bubble, and more.
- Contoh:
- Bagan area
- Bagan batang
- Bagan Bubble
- Kalender
- Bagan kandil
- Bagan kolom
- Bagan kombo
- Gantt
- Mengukur
- Bagan Geo
- Histogram
- Bagan garis
- Grafik org
- Bagan PIE
- Sankey
- Bagan sebar
- Bagan Area Langkah
- Meja
- Timeline
- Peta Pohon
- Pohon Kata
- Animasi
- Editor bagan
- Kontrol
- Interaksi
- tata letak
- Spreadsheet
- Toolbar

3. Apexcharts.js

- Fitur: Berbagai jenis bagan seperti garis, kolom, batang, pai, dan banyak lagi.
- Contoh: Termasuk kode sumber untuk semua contoh untuk menghemat waktu pengembangan.

4. Canvasjs

- Fitur: Grafik interaktif, responsif dengan animasi, zooming, panning, acara, ekspor, drilldown, dan pembaruan waktu-nyata.
- Contoh:
- Bagan garis
- Bagan Spline dan Langkah Langkah
- Bagan area
- Area spline, area bertumpuk, area bertumpuk 100, area langkah, area jangkauan, dan grafik area rentang spline
- Bagan kolom
- Bagan batang
- Kolom bertumpuk, kolom bertumpuk 100%, kolom kisaran, bar bertumpuk, batang bertumpuk 100%, rentang bar, dan grafik air terjun
- Diagram lingkaran
- Donat / donat grafik
- Bagan corong dan piramida
- Bagan Candlestick dan OHLC
- Bagan sebaran dan gelembung
- Bagan kotak dan kumis
- Bagan garis kesalahan dan kesalahan
- Bagan Dinamis
- Bagan stok dengan pemilih rentang, navigator, dan beberapa bagan

5. Tanstack/react-charts

- Fitur: Berbagai jenis bagan seperti garis, batang, gelembung, dan banyak lagi.
- Contoh: Termasuk contoh untuk sederhana, garis, batang, gelembung, area, gaya khusus, tooltip khusus, opsi sumbu, mode gelap, kilau, menyikat, mode pengelompokan, opsi tooltip, dan banyak lagi.

Perpustakaan ini memberikan contoh dan templat yang luas untuk membantu Anda memulai dengan membuat bagan di aplikasi React Anda. Anda dapat memilih yang paling sesuai dengan kebutuhan Anda berdasarkan jenis grafik yang ingin Anda buat dan tingkat kustomisasi yang Anda butuhkan [1] [2] [3] [4] [5].

Kutipan:
[1] https://react-chartjs-2.js.org/examples/
[2] https://www.react-google-charts.com/examples
[3] https://apexcharts.com/react-chart-demos/
[4] https://canvasjs.com/react-charts/
[5] https://codesandbox.io/examples/package/react-charts