Bu yazımızda React Js Web uygulama platformu ile ilgili örneklerimize devam edeceğiz. Daha önce paylaştığımız React yazılarına göz atmak için aşağıdaki linkleri kullanabilirsiniz.

1-React Native — Mobil Haber Uygulaması

2-React Native — Socket IO (Kur Bilgilerini Push Etme)

3-React Native — Mobil Uygulama Geliştirme

4-React Hooks Nedir?

React Js tarafında bir çok chart kütüphanesi bulunmaktadır. Bunlardan bir tanesi de google chart kütüphanesidir. Bu kütüphaneye npm üzerinden ulaşabilirsiniz. Şimdi geçelim örneğimize.

Önce projemizi oluşturalım.

create-react-app reactgooglechart

Npm üzerinden ilgili paketimizi yükleyelim.

npm i react-google-charts

Projemizi Visual Studio Code üzerinde açarak app.js üzerinde aşağıdaki değişikliği yapalım.

import { Chart } from "react-google-charts"

Ardından bir options tanımladık ve ilgili data setimizi oluşturduk.

Uygulamamızın render kısmında ise Chart component’ine oluşturduğumuz options ve data seti verdik. Chart tipi olarak “PieChart” tanımlaması yaptık.

Şimdi uygulamamızı çalıştıralım.

npm start

Evet uygulamamıza http://localhost:3000 portu üzerinden ulaşabilirsiniz.

Uygulama çıktısı:

Farklı bir örnek daha yapalım. Son 5 güne ait dolar kurlarını chart üzerinde gösterelim.

Uygulama çıktısı:

Faydalı olması dileğiyle hoşçakalın..