Membuat Grafik Keren dengan React Native Chart Wrapper

Membuat grafik dari sebuah data adalah hal yang cukup memayahkan bagi pengembang aplikasi mobile yang masih baru. Terutama untuk grafik-grafik yang mendukung pengendalian seleksi data, pewarnaan grafik, hingga animasi pergerakan data. Untuk itulah, pada tulisan kali ini saya akan memaparkan langkah-langkah praktis membuat grafik dengan React-Native untuk dipasang pada aplikasi perangkat bergerak, khususnya pada gawai dengan sistem operasi Android. Pada tulisan ini, saya mengasumsikan pembaca telah memahami penggunaan React-Native untuk mengembangkan aplikasi.

REACT NATIVE CHART WRAPPER

Pustaka (library) yang saya gunakan dalam membuat grafik adalah pustaka react native chart wrapper yang tersedia di npm, yang merupakan pengembangan lebih lanjut dari pustaka MPAndroidChart. Pustaka ini dikembangkan oleh wuxudong, terima kasih banyak untuknya.

Sampai saat ini, saya menganggap pustaka ini adalah pustaka terbaik untuk React Native. Beberapa kelebihan dari pustaka ini sebagai berikut.

• Mendukung banyak jenis grafik
• Mendukung styling yang mumpuni sehingga grafik tampil keren
• Mendukung animasi pergerakan grafik
• Mendukung zoom
• dan masih banyak lagi.

Penginstalan

Untuk menginstall pustaka ini, buka terminal atau command prompt masuk ke direktori proyek React-Native Anda dan ketikkan perintah berikut.

npm install --save react-native-charts-wrapper

Setelah penginstalan selesai, tambahkan maven jetpack.io ke daftar repository pada file android/build.gradle.

allprojects {
    repositories {
        ...

        maven { url "https://jitpack.io" }    // used for MPAndroidChart
    }
}

Setelah itu, lakukan sambungan (linking) ke proyek Anda. Caranya dengan mengetik perintah berikut.

react-native link react-native-charts-wrapper

Konfigurasi Awal Grafik

Modul ini mendukung banyak jenis grafik, termasuk grafik garis, grafik batang, scatter, radar, pie, gelembung (bubble), dan candlestick. Pada kesempatan ini, saya akan menggunakan grafik garis. Untuk grafik jenis lainnya, Anda dapat mengeksplorasi sendiri.

Pada grafik garis, tag yang digunakan adalah tag <LineChart>. Beberapa hal yang Anda harus perhatikan adalah sebagai berikut.

• Format data. Format data yang diperlukan oleh modul ini adalah sebagai berikut.

data: {
  ...
  dataSets: [
    {
  	values: [5, 40, 77, 81, 43],
        label: '<labeldata>',
        config: {
          lineWidth: 2,
          drawCircles: true,
          highlightColor: processColor('#6caefb'),
          color: processColor('#6caefb'),
          drawFilled: true,
          fillColor: processColor('#6caefb'),
          fillAlpha: 60,
          drawValues: false,
          valueTextColor: processColor('white'),
        }
    },
  	....
  ]
}

Jika Anda menginginkan dalam satu ruang grafik terdapat lebih dari satu data, maka cukup tambahkan value pada elemen kedua dan seterusnya pada larik (array) dataSets. Anda dapat mengubah-ubah sendiri nilai-nilai untuk masing-masing kunci konfigurasi. Gunakan processColor(<color>)untuk memberikan warna.

• Format Axis X (Absis). Format untuk mengatur Axis X adalah sebagai berikut.

xAxis: {
   ...
   valueFormatter: ['label 0', 'label 1', 'label 1', ...],
   position: 'BOTTOM',
   textColor: processColor('white'),
   label: "Hari"
}

• Format Axis Y (Ordinat). Modul ini mendukung penampilan dua ordinat, yaitu kanan dan kiri. Formatnya sebagai berikut.

yAxis: {
    ...
    left: {
      textColor: processColor('white'),
      axisMinimum: 0,
      axisMaximum: 100
    },
    right: {
      enabled: false
    }
}

Catatan: Jika tidak menentukan axisMinimum dan axisMaximum, paka grafik akan menyesuaikan sendiri nilai minum dan maksimum pada axis Y.

• Saya sarankan Anda menyimpan data-data ini di state, sehingga dapat diperbarui atau diubah dengan lebih mudah kapan saja Anda mau.

Waktunya Memasang di Layar

Setelah data-data di atas selesai dikonfigurasi, sekarang waktunya mencoba memasangnya di layar. Gunakan <LineChart> dengan susunan sebagai berikut untuk menampilkan data grafik garis.

<LineChart
    style={styles.chart}
    data={this.state.dataDay}
    description={{text: ''}}
    legend={this.state.legend}
    marker={this.state.marker}
    xAxis={this.state.xAxis}
    yAxis={this.state.yAxisDay}
    animation={{durationX: 2000}}
    drawGridBackground={false}
    borderColor={processColor('teal')}
    borderWidth={1}
    drawBorders={true}
    touchEnabled={true}
    dragEnabled={true}
    scaleEnabled={true}
    scaleXEnabled={true}
    scaleYEnabled={true}
    pinchZoom={true}
    doubleTapToZoomEnabled={true}
    dragDecelerationEnabled={true}
    dragDecelerationFrictionCoef={0.99}
    keepPositionOnRotation={false}
    onSelect={this.handleSelect.bind(this)}
/>

Anda dapat menyesuaikannya sesuka Anda. Untuk onSelect, itu berguna untuk mengatur apa yang akan dilakukan ketika Anda memilih sebuah titik pada grafik. Berikut ini contoh layar yang telah saya buat dengan memanfaatkan modul grafik ini.

Grafik dengan satu data

Grafik dengan dua data

Sekian penjelasan singkat saya tentang cara membuat grafik di React-Native. Semoga bermanfaat!